緩動位置：固定格

我想在我的網站上添加博客圖標
其位置固定，底部：50px;右10px;
在頁面滾動時，我想爲圖標添加緩動效果（例如：在wordpress socialmedia icon demo link中可用的一些社交媒體小部件）。在滾動時，圖標必須根據滾動向上或向下移動，之後它必須保持其位置並穩定下來。緩動位置：固定格

來源

2014-02-28 Sebin Simon

查找[CSS轉換屬性（HTTP：// CSS-技巧.com/almanac/properties/t/transition /）easing。 –

我需要完全像這裏顯示的社交媒體圖標 - > http://www.acurax.com/products/floating-social-media-icon-plugin-wordpress/ –

我得到了解決
我希望這會幫助別人！ HTML

<a class="blog_button" href="#" title="Blog"><img src="images/blog_butn.png" alt="blog"></a>

CSS

.blog_button{ 
    position: absolute; 
    right:0; 
    top:50%; 
    z-index: 5000; 
}

jQuery--

$(window).scroll(function(){ 

    var bb= $(document).scrollTop(); 
    var ac_height=$(window).height()/2.3; 
    bb=parseInt(bb)+parseInt(ac_height); 
    var h=bb+'px' 
    $('.blog_button').animate({top:h},50); 
});

來源

2014-02-28 06:10:54

通過使用一些JS code您可以達到此效果。

這裏是這裏使用的Js代碼。

$().ready(function() { 
     var $scrollingDiv = $("#scrollingDiv"); 

     $(window).scroll(function(){    
      $scrollingDiv 
       .stop() 
       .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow");   
     }); 
    });

CSS這裏使用

#scrollingDiv{background-color:red; padding:5px; font-size:15px; position:fixed; top:0; right:0;}

這裏的工作演示http://jsfiddle.net/SAVF7/9/

來源

2014-02-28 05:40:22

你必須使用絕對的，而不是固定的位置，並使用這個腳本：

JAVASCRIPT

$(document).ready(function() { 
    var $yourDiv = $("#scrollingDiv"); 
    $(window).scroll(function(){    
     $yourDiv.stop().animate({"marginTop":($(window).scrollTop() + 10) + "px"}, "300"); 
    }); 
});

CSS

#scrollingDiv{background-color:green; padding:5px; font-size:15px; position:absolute; top:0; right:0;}

這裏是fiddle DEMO此：

來源

2014-02-28 08:50:23 Alex

我得到的答案如下 –

緩動位置：固定格

回答

相關問題