最近博客吧喜欢上用户体验这个词，因此想逐步把博客吧打造成具有较高用户体验的博客，虽然目前我不再对博客吧进行优化，但也无法阻挡我对他的热爱。侧栏是博客相对重要的区域，往往会放上某些文章列表来推荐给用户，可有时候当文章内容较长的时候，侧边会空白一大块，显然浪费地方，且用户想看侧栏的文章列表时，还在往上拉，这不就是用户体验差的表现吗？因此我绝定将其随滚动条固定。
实现步骤：
把以下jQuery代码放在</head>前面，或者</body>前面，后者比较好
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//侧栏随动 (function(){ var oDiv=document.getElementById("cateposts"); 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="widget div2";if(iE6){oDiv.style.top=(s-H)+"px";}} else{oDiv.className="widget";} }; } })(); |
这是博客吧的右栏html代码：
1 2 3 4 |
<li class="widget" id="cateposts"> <h3 class="widgettitle">标题</h3> 调用代码 </li> |
下面是博客吧右栏css样式代码：
1 2 |
#sidebar li {list-style-type: none; margin: 0 0 10px; overflow:hidden; padding:14px; border:1px solid #bbb; background:#fff; width:330px;} .div2 {position:fixed;_position:absolute;top:3px;z-index:295; width:300px;} |
提醒：这是符合博客吧的模板代码，演示效果看右栏，测试支持IE7、Ie8、Firefox、Chrome浏览器，IE6无效果无错位，其余浏览器没有测试。如果你不明白，可以查看IM路人的原版代码，地址是http://imluren.com/2011/08/jquery-roll-fixed.html比较整洁，理解容易。
发表回复