Question

我想在我的网站上添加博客图标其位置固定，底部：50px;对10px;
在页面滚动时，我想在图标上添加缓动效果（例如：wordpress socialmedia icon demo link中提供的一些社交媒体窗口小部件）。在滚动时，图标必须根据滚动向上或向下移动，之后必须保持其位置并稳定下来。

Answer 1

通过使用一些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/

Answer 2

您必须使用绝对位置而不是固定位置并使用此脚本：

<强> 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 ：

Answer 3

我得到了解决方案
我希望它会帮助别人！ 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);
 });

位置缓和效果：固定div

3 个答案: