分享一个侧边栏跟随代码 已测试

bruce0721 2021-06-04 网站相关 381 ℃ 0 评论 请在这里放置你的在线分享代码

先来css:

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

在看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&&!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";}}    
            else{oDiv.className="div1";}        
        };    
    }    
})();

注意:不知道是网站页面其他js影响还是怎么了,上面这段js如果要放在某个js文件里面,且页面效果无法呈现,直接写在模板里面就正常。这个抽时间在看吧!

网页代码部分:

<div id="box">   
<div id="float" class="div1">     
这里写你网站的代码与标签    
</div>   
</div>

最终呈现的效果:

跟随1.png

跟随2.png

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

老李个人博客