卢松松版侧边部分内容滑动跟随

所谓侧边部分内容跟随,是页面在滚动时,wordpress 侧边的部分内容跟随屏幕滚动而保持在浏览器某一位置不变,就像跟随页面一样,可以让这一部分内容一直显示在网页页面上。实现这个功能的代码有很多种,我的侧边使用的是卢松松网站的那种跟随方式。

卢松松的侧边跟随实现方法是,用 js 获取需要跟随的那部分内容的 id,当页面滚动到这个位置后通过 js 给该 id 的内容的容器自动加上一个新的 class,然后在 CSS 里定义了新 class position 为 fixed 的样式。

这一方式其实可以归类为 CSS 跟随,因为通过 CSS 样式跟随,所以有兼容性问题,比如 IE6 下 position:fixed 就不行,需要 hack。不过 CSS 的好处就是不用刷新,直接跟随,不会有内容不显示的问题。具体方法如下:

一、js 部分:

[nt]//侧栏跟随[/nt]
(function(){

        var oDiv=document.getElementById("float"); [nt]//获取 id 为 float 的容器[/nt]
        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";}}[nt]//给id为float的容器加了个 div2 的class[/nt]
                        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 代码没有判断页面高度和最低参照,所以只要页面在滚它都一直跟随,如果你页脚内容太高,可能会导致跟随滚动的内容覆盖页脚部分内容,比如我的博客就是这样。

THE END

评论 34

  1. 🏅

    我还以为“OO”是回复来着,点错了

  2. 🏆🏅

    好像比我发的那个简单。。。

  3. wordpress侧边栏滑动模块的实现 - 我可以
  4. 🏆🏆🏅

    你的研究越发的深奥了

  5. 🏆🏅

    我还是比较对你文章上面的分享栏感兴趣~~

    1. 这个是iplaysoft上抠的,你也可以去抠,哈哈哈 :mrgreen:

  6. 🏆🏅

    要是页面宽度变了,他是如何定位的~~不懂~~

      1. 🏆🏅

        就是...浏览器的宽度变化时,就可能出现定位不准的情况,覆盖掉之类的问题....

  7. 🏆🏆🏅

    怎么说呢,我是来吐槽的,标题基本就让我看不下去了

  8. 🏆🏅

    如果版面不经常改动的话,写个scroll事件就哦了。

    1. 🏆🏆🏅

      我不会写,我只会抄,操草草草。。。

  9. 🏅

    右边的这个跟随效果么?

  10. 🏅🏅🏅

    博主是个大帅哥,玉树临风,风流倜傥,坦坦荡荡,荡人心魄。。。。。

  11. 🏅🏅🏅

    我的评论被吃了。?

    1. 后台没看到有,估计提交没完全你跳页面了。

  12. 🏅🏅🏅

    也准备为新主题添加边栏滚动,否者到底部就太空了,不过一直没有找到好的解决办法,三栏就是麻烦

    1. 我准备换主题了,仿了煎蛋的,准备用上去。

      1. 🏅🏅🏅

        今天终于添加边栏滚动,总算了了一桩大事。如果没记错的话,似乎老早就有人仿过煎蛋的主题了

        1. 不知道别人仿的怎么样,我是精仿,几乎一摸一样,哈哈哈。

发表评论

幸会!