参考:LMS——侧边部分内容滑动跟随
所谓侧边部分内容跟随,是页面在滚动时,wordpress 侧边的部分内容跟随屏幕滚动而保持在浏览器某一位置不变,就像跟随页面一样,可以让这一部分内容一直显示在网页页面上。实现这个功能的代码有很多种,下面是最容易实现的一种。
侧边跟随实现方法是,用 js 获取需要跟随的那部分内容的 id,当页面滚动到这个位置后通过 js 给该 id 的内容的容器自动加上一个新的 class,然后在 CSS 里定义了新 class position 为 fixed 的样式。
这一方式其实可以归类为 CSS 跟随,因为通过 CSS 样式跟随,所以有兼容性问题,比如 IE6 下 position:fixed 就不行,需要 hack。不过 CSS 的好处就是不用刷新,直接跟随,不会有内容不显示的问题。具体方法如下:
一、js 部分:
//侧栏跟随 (function(){ var oDiv=document.getElementById("float"); //获取 id 为 float 的容器 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="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}//给id为float的容器加了个 div2 的class else{oDiv.className="div1";} }; } })();
二、CSS 部分:
.div2{position:fixed;_position:absolute;top:0;z-index:250;}
使用的时候要么在侧边里添加个 id 为 float 的容器,要么将 js 里的 float 改成你要跟随的侧边内容的 id。
这个侧边跟随有以下两个问题:
1、需要跟随滚动的侧边内容必须在侧边的最下方,因为只要页面遇到这个 id 的 div 就开始跟随,所以最好放最后,不然会遮住下面的内容。
2、滚动无下限,因为 js 代码没有判断页面高度和最低参照,所以只要页面在滚它都一直跟随,如果你页脚内容太高,可能会导致跟随滚动的内容覆盖页脚部分内容
未经允许不得转载:哈勃私语 » wordpress侧边栏滑动模块的实现
本文共1036个字 创建时间:2015年8月8日12:42