博客文章比较长的时候,侧边栏很容易变得很空,这种情况下,在侧边栏显示些推荐文章、分类或者标签,都是很不错的,可以方便访问者浏览其他文章,间接增加访问者停留的时间。
几个月前就弄过这样的效果,但是没成功,在一些浏览器下显示效果不好,今天看了一篇文章,JS代码写的不错,就稍微修改了下,实现了随着鼠标滚动到侧边栏消失后,显示固定的标签云模块的效果,见下图:
JS的实现原理实际上就是给要显示的模块增加上『position:fixed;』的CSS样式,固定模块,随着鼠标滚动,当滚动条的垂直偏移量超过了指定高度时显示模块,低于指定高度时则隐藏。如果要想将侧边栏的最后一个模块固定,代码就简单多了,在滚动事件内给最后一个模块附上CSS属性即可。
需要按各自的需求修改相应代码,完整的JavaScript代码如下:
//固定tag cloud jQuery(function ($) { //指定的高度,侧边栏距顶部距离+侧边栏高度+可视页面的高度 var sideTop=$("#sidebar").offset().top+$("#sidebar").height()+$(window).height(); var scTop = function() { if( typeof window.pageYOffset != 'undefined') { return window.pageYOffset; } else if( typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { return document.documentElement.scrollTop } else if( typeof document.body != 'undefined') { return document.body.scrollTop; } } $(window).scroll(function() { if (scTop() > sideTop) { if($("#fixed-siderbar").length == 0){ //下面是要显示的模块,复制侧边栏中的标签云内容,追加到侧边栏的底部 var tag = $("#tag_cloud-2 .widget-wrap").clone().html(); var html="<div id='fixed-siderbar'><div id='fixed-wrap'><div id='fixedTag' class='widget widget_tag_cloud' >"+ tag +"</div></div></div>" $("#sidebar").append(html); }else{ $("#fixed-siderbar").show(); } }else{ $("#fixed-siderbar").hide(); }; }); });
最后附上我的CSS,同样按需修改:
#fixed-siderbar{ z-index: 0; position:fixed; top:70px; }
经测试,在Chrome、Firefox、Safari和IE中显示正常,就是根据浏览器或显示器分辨率的不同,显示的垂直位置也不同,在iPhone中浏览会有稍微的卡顿。欢迎大家给出更好的获取垂直偏移量的方法!
文中JS代码参照于:http://www.xunzou.com/blog/post/624.html
其实你的侧边栏够长得了
是啊,大多文章也都挺长的,所以这个效果还有可用之处
其实你的侧边栏够长得了
是啊,大多文章也都挺长的,所以这个效果还有可用之处
技术文,马克
技术文,马克
添加好了,稍微修改了下,现在效果还比较完美。
改了哪里?我那段js在不同分辨率下,偏移量有问题
这个还没有发现偏移,把js中的“复制侧边栏中的标签云内容”删除了,改成调用边栏小工具的id或class。我的网站中调用的小工具放在最下面隐藏了,屏幕滚动到才现在。
原来如此
能否把修改后的代码分享一下?谢谢!
龙龙修改的,我没有,你可以去他博客扒去,
好嘞。
我看了一下,他的代码已经不是以这个为基础的了,貌似只适用于最后一个内容块,而我需要固定的内容块不是最后一个。
他的滚动到底部处理的比我好,你可以按自己需要修改啊,不同主题处理方式也就不一样了。
我试了你这种方法,可以用,效果也还好,不过貌似有个bug,就是向下滚动时,边栏消失后不会马上出现固定块,而是要再往下滚动一段距离,貌似是JS计算边栏高度的时候把隐藏那块也算进去了,请问有办法解决么?
是有这个问题,我要是能解决就不会放有瑕疵的代码出来了。我也没搞明白计算的距离差在哪里了,不同浏览器会有点区别,不同的字体也会有点影响。
不过也能用,将就点吧,谢谢。
我找到解决方法了,特来汇报,其实很简单,只需去掉 +$(window).height() 这段即可,其实这段代码还可以再优化一下,比如滚动到底部某个位置时会自动停止,避免覆盖到footer区。
多谢多谢,抽空我也优化下,不要覆盖footer就可以参照龙龙的博客了。
优化好后请通知我一声,谢谢!
添加好了,稍微修改了下,现在效果还比较完美。
改了哪里?我那段js在不同分辨率下,偏移量有问题
这个还没有发现偏移,把js中的“复制侧边栏中的标签云内容”删除了,改成调用边栏小工具的id或class。我的网站中调用的小工具放在最下面隐藏了,屏幕滚动到才现在。
原来如此
能否把修改后的代码分享一下?谢谢!
龙龙修改的,我没有,你可以去他博客扒去,
好嘞。
我看了一下,他的代码已经不是以这个为基础的了,貌似只适用于最后一个内容块,而我需要固定的内容块不是最后一个。
他的滚动到底部处理的比我好,你可以按自己需要修改啊,不同主题处理方式也就不一样了。
我试了你这种方法,可以用,效果也还好,不过貌似有个bug,就是向下滚动时,边栏消失后不会马上出现固定块,而是要再往下滚动一段距离,貌似是JS计算边栏高度的时候把隐藏那块也算进去了,请问有办法解决么?
是有这个问题,我要是能解决就不会放有瑕疵的代码出来了。我也没搞明白计算的距离差在哪里了,不同浏览器会有点区别,不同的字体也会有点影响。
不过也能用,将就点吧,谢谢。
我找到解决方法了,特来汇报,其实很简单,只需去掉 +$(window).height() 这段即可,其实这段代码还可以再优化一下,比如滚动到底部某个位置时会自动停止,避免覆盖到footer区。
多谢多谢,抽空我也优化下,不要覆盖footer就可以参照龙龙的博客了。
优化好后请通知我一声,谢谢!
喜欢jquery
折腾代码,继续。