WP酷在之前分享过简单实现侧边栏跟随页面滚动效果,可该代码有一个重大缺陷——滑动的元素只能在最后面,否则会把其它内容盖住。有什么其它的好方法吗?草野时代博主总结了几个测试完美无BUG的实现侧边栏随滚动条滚动并固定位置代码,大家可以试一下。以下三种方法任选其一使用,需要按照自己网站的问题稍稍修改才能正常运行。
常用的CDN引用安装JQuery:
<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 }); }; }); });
现在百度喜欢不会被ADBLOCK 屏蔽了。。。
@WordPress主题|http://www.wpmee.com/ 啊啊百度喜欢?
学习一下
很是不错,改天鼓捣鼓捣。
火狐有效不
@动力环境监控 当然
可以试试这个插件,你说到的功能都有。http://caibaojian.com/scrollfix
[睡大觉] 过来支持一下值得收藏分享
折腾,继续折腾当中。
为什么首次进入我博客的时候,侧边栏判断高度错误,跟上一个模块的部分重叠,刷新下首页,判断高度又正确了,这是为什么?求教呀。
@mrjucn 先加载js再加载dom试一下,第二次进入你博客因为js缓存下来了,所以可以正常计算高度吧
第三种可以 去掉动画效果吗,直接固定。
@枢纽 删去 $(“#sidebar”).stop().animate({ … });