侧边栏实现随滚动条滑动固定的效果
最近在⼀些博客看到侧边栏某些板块，随着滚动条的滑动，⽽跟着滑动或者固定的效果，感觉⾮常的⼈性化，⼀来可以弥补当⼀个页⾯很长，但侧边栏太短的时候的空⽩，⼆来可以合理利⽤空间展⽰更多信息，可以⼤⼤的提⾼曝光率和点击率。这样⼦的效果很适合于⽂章的列表（⽐如⽉度排⾏、热门⽂章之类的），还有适合于⼴告联盟的展⽰。所以去⽹上了⼀些资料，整理了⼀下，现在分享给⼤家，也⽅便以后⾃⼰查阅，希望对⼤家有⽤。
效果⼀：侧边栏固定模块
来源：
Js代码
//侧栏跟随
(function() {
var oDiv = ElementById("float");
var H = 0,
iE6;
var Y = oDiv;
while (Y) {
H += Y.offsetTop;
Y = Y.offsetParent
};
iE6 = window.ActiveXObject && !window.XMLHttpRequest;
if (!iE6) {
var s = document.body.scrollTop || document.documentElement.scrollTop;
if (s > H) {
oDiv.className = "div1 div2";
if (iE6) {
p = (s - H) + "px";
}
} else {
oDiv.className = "div1";
}
};
}
})();
注：为了减少js⽂件引⽤，这段代码可放⼊任意JS⽂件中
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>
注：这⾥可以放⽂章列表、联盟⼴告，总之是个提⾼点击率的好⽅法。wordpress⽤户把此段代码添加到sidebar.php的侧栏位置即可。
特别提⽰：此代码试⽤与任何CMS系统，但该特效在IE6下⽆法实现，其余浏览器均没问题，同时侧栏其余部分应使⽤静态⽂件调⽤，使⽤JS调⽤栏⽬会出现代码重叠现象，调⽤联盟⼴告没问题。
效果⼆：侧边栏随窗⼝滚动（滑动效果）
来源：
实现这个随窗⼝滚动效果，⾸先主题必须加载jQuery。已经完美解决侧边栏会顶着页脚⽆限滚下去的bug，⼀起看看代码：
<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() > p) {
var newPosition = ($(window).scrollTop() - p) + topPadding;
var maxPosition = documentHeight - (sideBarHeight + 368);
if (newPosition > maxPosition) {
newPosition = maxPosition;
}
$("#sidebar").stop().animate({
marginTop: newPosition
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
});
</script>
将上述javascript代码加到主题头部header.php模版中。修改其中的#sidebar为你的主题侧边选择器名称；根据不同的主题头部模版⾼度，适当调整其中的数字“368”。
效果三：添加侧边栏随滚动条滚动效果（⽆滑动）
来源：
给侧边栏的各个模块加上⼀些class标志，如下图框框⾥⾯的内容：
gundong
如果你的侧边栏之前已经有了这些class标志加以区分，只要使⽤就可以了，不⽤另外加。
在主题的js⽂件中加上如下代码：
var rollStart = $('.Statistics'), //滚动到此区块的时候开始随动
rollOut = $('.WidgetMeta,.Statistics'); //隐藏rollStart之后的区块
rollSet = $('.RRPosts,.TagsCloud'); //添加rollStart之前的随动区块
rollStart.before('<div class="rollbox" ></div>');
var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev();
objWindow.scroll(function() {
if (objWindow.scrollTop() > p){
if(rollBox.html(null)){
rollSet.clone().prependTo('.rollbox');
}
rollOut.fadeOut();
jquery滚动条滚动到底部
rollBox.show().stop().animate({top:0,paddingTop:10},400);
} else {
rollOut.fadeIn();
rollBox.hide().stop().animate({top:0},400);
}
});
注：滚动区域的内容不能太长，不然会出现⽆限下拉的情况。
效果四：JQUERY SCROLL FOLLOW
这是⼀个插件，添加步骤很简单，操作简单就是使⽤插件的好处，下载压缩包解压到⽹站⽬录，然后按照步骤操作即可。但个⼈不推荐插件，能⽤代码实现的效果，就不⽤插件。
插件下载地址：
⽰例页⾯：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。