zoukankan      html  css  js  c++  java
  • 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”。这种特效对提高网站浏览量、文章点击率、广告点击量都有一定效果。

    侧栏跟随滚动的实现方法有很多种,比较常见的有两种,这两种方法在NEOEASE写的一篇文章中介绍的很清楚,一种是借助jQuery来实现,这种方法对于那些平时不需要加载jQuery库的网站来说,显然是一种负担(jQuery现在是越做越大了……)。另外一种方法是通过原生javascript编写的效果,这种方法相比上一种,要轻盈得多。但是,我还是不够满足,原生的javascript写的文件也有4K多,对于我这种至简至上的人来说,还是太繁杂了。那么有没有更简单的实现办法呢?

    答案当然是肯定的。下面具体介绍。

    先说html文件

    <div id=”box”>
    <div id=”float” class=”div1″>
    在这里加入需要跟随滚动的内容
    </div>
    </div>

    然后是CSS代码

    #box{float:left; position:relative;width:250px;}
    .div1{width:250px;}
    .div2{position:fixed;_position:absolute;top:0;z-index:250;}

    最后是JS代码(可以放在需要滚动的页面中,也可以放在单独的JS文件中再调用)

    (function(){
    var oDiv=document.getElementById(“float”);
    var H=0,iE6;
    var Y=oDiv;
    while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
    iE6=window.ActiveXObject&amp;&amp;!window.XMLHttpRequest;
    if(!iE6){
    window.onscroll=function()
    {
    var s=document.body.scrollTop||document.documentElement.scrollTop;
    if(s&gt;H){oDiv.className=”div1 div2″;if(iE6){oDiv.style.top=(s-H)+”px”;}}
    else{oDiv.className=”div1″;}
    };
    }
    })();

    OK,大功告成,够简单吧。

  • 相关阅读:
    IE8 "开发人员工具" 无法使用,无法显示
    Python中用OpenPyXL处理Excel表格
    calendar函数使用说明【转】
    python之fabric2.0模块学习
    Day9
    Day8
    深入super,看Python如何解决钻石继承难题——转自楚门蔡的测视界
    python/socket编程之粘包
    os模块关于目录
    Day7
  • 原文地址:https://www.cnblogs.com/rightzhao/p/3474239.html
Copyright © 2011-2022 走看看