Keep on going, never give up.

网站侧边栏滚动停驻方法

网站侧边栏滚动停驻还是很有意思,尤其是像天缘博客这种技术笔记型文章,废话多又冗长,经常能看到正文滚动后侧面白板的情况,还是有必要美一美。网上也有很多种类似代码,有的兼容性非常好,IE、OPERA、FIREFOX、CHROME等等各版本全兼容了,天缘更喜欢简约代码,只对最新版本IE/CHROME/FIREFOX有效就行了,于是精简修改了这么一段停驻代码出来,也是天缘正在使用的。

一、停驻示例代码

CSS Style部分:

.SideModule {padding:0;margin:20px 20px 15px 0px;}
.SideFix{position:fixed;_position:absolute;top:0;z-index:250;}

HTML布局部分:

<div class="divSide">
    <div class="SideModule" id="divSubscribe">Top Codes</div>
    <div class="SideModule" id="divSbot">Ad Codes</div>
</div>

JS代码部分:

    try{
        var fixDiv=getem("divSbot");
        var dH=fixDiv.offsetTop;//default h
        var iE6 = window.ActiveXObject&&!window.XMLHttpRequest;
        if(!iE6){
            window.onscroll=function()    {
                var s=document.body.scrollTop||document.documentElement.scrollTop;
                var nH = fixDiv.offsetTop;
                if(nH>20 && nH!= dH) {//update h, 20 is SideModule margin-top in css
                    dH = nH;
                }
                if(s>dH){
                    fixDiv.className="SideModule SideFix";
                }else{fixDiv.className="SideModule";}    
            };    
        }
    }catch(e){};

二、使用提醒

1、HTML布局部分

以divSbot作为最底部边栏的标记,比如网站广告代码、或区段代码放在这里,最终JS执行时,当超越divSbot缺省顶部偏移时,自动把divSbot进行重排。

2、JS代码部分

JS代码中nH>20是因为上面有个margin-top,如果不设这个值,那么当页面向下滚动时,第一次重排时会有个跳跃。

JS代码的执行时机,之前是放在document.ready()里执行的,但因为Google已经全线被中国敏感词封锁,导致包括Google Analytics、Goole Search等页面元素无法ready,所以,只能直接放到页面底部,不判断载入情况直接运行了。

(function(){
//Codes
})();

因为侧边栏模块基本都是使用JS代码载入,导致实际divSbot位置在刚载入那一段时间不断变化,所以,只要页面滚动,JS中的nH就会重新计算offsetTop位置,得到当前准确的位置,而不是函数初始化时第一次初值。

参考代码:

http://lusongsong.com/reed/453.html

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2016 Metsky.com, All rights Reserved.