jQuery实现侧边栏随滚动条滚动并固定位置

WordPress 教程 3年前 (2014-01-19) 5,330 人围观 11

　　WP酷在之前分享过简单实现侧边栏跟随页面滚动效果，可该代码有一个重大缺陷——滑动的元素只能在最后面，否则会把其它内容盖住。有什么其它的好方法吗？草野时代博主总结了几个测试完美无BUG的实现侧边栏随滚动条滚动并固定位置代码，大家可以试一下。以下三种方法任选其一使用，需要按照自己网站的问题稍稍修改才能正常运行。

常用的CDN引用安装JQuery：

1 2	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <!--Google--> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <!--Microsoft-->

侧边栏滚动结束时固定设定模块

利用这串代码，可以自动获取侧边栏高度，当侧边栏滚动结束后，设定的模块激活并固定在屏幕中，IE6无效。
默认支持两个模块，如果需要增加模块要在第二行添加变量并参照第8行的代码为新变量添加启动的参数。

jQuery(document).ready(function (a) {

var c = 1,d = 2; //这里设定的是第1和第2

a.browser.msie && 6 == a.browser.version && !a.support.style || (

e = a("#sidebar").width(), f = a("#sidebar .widget"), g = f.length, g >= (c > 0) && g >= (d > 0) && a(window).scroll(function () {

var b = document.documentElement.scrollTop + document.body.scrollTop;

b > f.eq(g - 1).offset().top + f.eq(g - 1).height() ? 0 == a(".roller").length ? (f.parent().append('<div class="roller"></div>'),

f.eq(c - 1).clone().appendTo(".roller"),

c !== d && f.eq(d - 1).clone().appendTo(".roller"),

a(".roller").css({

position: "fixed",

top: 50,

zIndex: 0,

width: 250

}), a(".roller").width(e)) : a(".roller").fadeIn(300) : a(".roller").fadeOut(300)

}))

});

当滚动到指定模块时置顶该模块

下面这串代码适合侧边栏较长的用户，如有JavaScript加载的模块高度会判断出错，建议侧边栏没有JavaScript模块的用户使用。
当滚到#suggested 时置顶该模块，可以按自己的需要修改。

jQuery(document).ready(function($) {

$.fn.smartFloat = function() {

var position = function(element) {

var top = element.position().top,

pos = element.css("position");

$(window).scroll(function() {

var scrolls = $(this).scrollTop();

if (scrolls > top) {

if (window.XMLHttpRequest) {

element.css({

position: "fixed",

top: 0

});

} else {

element.css({

top: scrolls

});

}

} else {

element.css({

position: "absolute",

top: top

});

}

});

};

return $(this).each(function() {

position($(this));

});

};

//绑定,将引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC"

$("#suggested").smartFloat();

});

滚动到一定像素后固定显示

类似于当滚动到指定模块时置顶该模块，不同之处是设定固定的高度，卷动到该高度时显示置顶的模块。

默认给出的是卷动368像素后侧边栏#sidebar 整体跟随滑动,适合侧边栏少的网站。

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

});

};

});

赞一个 [20]收藏 (0)

WordPress主题|wpmee.com 评论于2014/01/21 12:40 回复
现在百度喜欢不会被ADBLOCK 屏蔽了。。。
- WP酷评论于2014/01/21 18:24 回复
  啊啊百度喜欢？
ikx.me iPhone越狱用户的福地评论于2014/02/14 11:42 回复
学习一下
小清新头像吧评论于2014/05/29 20:03 回复
很是不错，改天鼓捣鼓捣。
动力环境监控评论于2014/05/30 16:17 回复
火狐有效不
- WP酷评论于2014/05/30 18:20 回复
  当然
酷剑评论于2014/06/16 09:24 回复
可以试试这个插件，你说到的功能都有。http://caibaojian.com/scrollfix
外贸业务员评论于2016/03/30 07:14 回复
[睡大觉] 过来支持一下值得收藏分享
番茄评论于2016/04/23 12:11 回复
折腾，继续折腾当中。
mrjucn 评论于2016/10/26 06:43 回复
为什么首次进入我博客的时候，侧边栏判断高度错误，跟上一个模块的部分重叠，刷新下首页，判断高度又正确了，这是为什么？求教呀。
- Tokin 评论于2016/10/31 08:05 回复
  先加载js再加载dom试一下，第二次进入你博客因为js缓存下来了，所以可以正常计算高度吧