先看这个Demo

前一阵子加上了木木童鞋供图的页面滑动导航,木木用的方法是将此物position:fixed。效果是现实了,不过它就是死死的钉在那里,一动不动,有悖于大家一起“得瑟”的精神,现在,我们动手开始活化它,大家“得瑟”,才是真的“得瑟”!

这个效果和大家在垃圾站看到的广告跟随效果一样,不过是基于jQuery实现的,通吃所有浏览器,哈哈。

首先,设置要跟随页面滑动的元素的css:

#shangxia{float:left;width:50px;margin:200px 0 0 100px;}

这里的margin值需要根据自己的需求进行修改,四个参数依次是“上、右、下、左”。

接下来,就要上jQuery代码了:

$(document).ready(function(){
	    var $sidebar   = $("#shangxia"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 400;
    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 200
            });
        }
    });
});

第二行 var $sidebar= $(“#shangxia”)中#shangxia要修改为你的元素。

什么?不会用jQuery?这里,《如何正确使用jQuery