前面有介绍几种随滚动条固定滚动的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/
