jQuery随滚动条滑动固定的效果代码及插件汇总

前面有介绍几种随滚动条固定滚动的jquery代码：

jQuery判断div随滚动条滚动到一定位置后停止

兼容IE6浏览器的jQuery实现边栏随滚动条固定

jQuery实现页面滚动时层智能浮动定位（随滚动条滚动）

下面再介绍几种，实现的效果大同小异，只是代码有些差异，可以用来参考学习：

效果一：

jQuery代码：

//侧栏跟随
(function() {
    var oDiv = document.getElementById("float");
    var H = 0,
    iE6;
    var Y = oDiv;
    while (Y) {
        H += Y.offsetTop;
        Y = Y.offsetParent
    };
    iE6 = window.ActiveXObject && !window.XMLHttpRequest;
    if (!iE6) {
        window.onscroll = function() {
            var s = document.body.scrollTop || document.documentElement.scrollTop;
            if (s > H) {
                oDiv.className = "div1 div2";
                if (iE6) {
                    oDiv.style.top = (s - H) + "px";
                }
            } else {
                oDiv.className = "div1";
            }
        };
    }
})();

CSS效果：

/*侧栏跟随*/
#box_float {float:left; position:relative; width:250px;}
.div1 {width:250px;}
.div2 {position:fixed; _position:absolute; top:0; z-index:999;}

HTML代码：

<div id="box_float">
  <div id="float" class="div1">
  这里写你网站的代码与标签
  </div>
</div>

效果二：侧边栏随窗口滚动（滑动效果）

<script type="text/javascript">
var documentHeight = 0;
var topPadding = 15;
$(function() {
    var offset = $("#sidebar").offset();
    documentHeight = $(document).height();
    $(window).scroll(function() {
        var sideBarHeight = $("#sidebar").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight + 368);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $("#sidebar").stop().animate({
                marginTop: newPosition
            });
        } else {
            $("#sidebar").stop().animate({
                marginTop: 0
            });
        };
    });
});
</script>

效果三：添加侧边栏随滚动条滚动效果（无滑动）

var rollStart = $('.Statistics'), //滚动到此区块的时候开始随动
	rollOut = $('.WidgetMeta,.Statistics'); //隐藏rollStart之后的区块
	rollSet = $('.RRPosts,.TagsCloud'); //添加rollStart之前的随动区块

rollStart.before('<div class="rollbox" style="position:fixed;width:inherit;"></div>');
var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev();
objWindow.scroll(function() {
	if (objWindow.scrollTop() > offset.top){
		if(rollBox.html(null)){
			rollSet.clone().prependTo('.rollbox');
		}
		rollOut.fadeOut();
		rollBox.show().stop().animate({top:0,paddingTop:10},400);
	} else {
		rollOut.fadeIn();
		rollBox.hide().stop().animate({top:0},400);
	}
});

效果四：JQUERY SCROLL FOLLOW

这是一个插件，添加步骤很简单，操作简单就是使用插件的好处，下载压缩包解压到网站目录，然后按照步骤操作即可。但个人不推荐插件，能用代码实现的效果，就不用插件。

插件下载地址：http://kitchen.net-perspective.com/open-source/scroll-follow/