详情页

fixed功能的鼠标跟随 js代码

时间:2023年11月28日

编辑:佚名

网站侧栏里的有些内容滚动到页面顶端以后就固定在那个位置,不再跟随滚动条而滚动。这种效果叫做“侧栏跟随滚动”。它对于那些不希望被滚动到页面之外的内容是非常有用的。 为了更好的用户体验,也为了让用户能够看到网站更多的信息,今天分享右侧跟随JS代码。
<div id="box">
<div id="float" class="div1">
在这里加入需要跟随滚动的内容
</div>
</div>
上面是Html代码,一个大的容器box,然后就是id为float跟随的容器
#box{float:left; position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0;z-index:250;}
上面是样式表文件,可以自定义的
(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代码.
备注:上面的标红的是可以根据灵活网站需要定义样式的。
相关文章
猜你需要