简易又常用的吸顶条

最新推荐文章于 2021-10-25 13:08:02 发布

张细枝

最新推荐文章于 2021-10-25 13:08:02 发布

阅读量219

点赞数

本文链接：https://blog.csdn.net/weixin_44884650/article/details/89319266

版权

window.onscrolls事件
下面的p文本主要用来展示吸顶效果
略丑，见怪
制作方法简易
主要运用
window.onscroll事件
以及document.documentElement.scrollTop;获取到当前页面顶部距离
加以判断当这个吸顶条的当前页面距离大于一定数值时改变吸顶条的定位方式以及位置就可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
.dongxi{
    width: 100%;
    height: 250px;
    background: green;
}
#xdt{
    width: 1190px;
    height: 50px;
        margin: 0 auto;
    background: yellow;
}
p{
    text-align: center;
}

    </style>
</head>
<body>
    <div class="dongxi"></div>
    <div id="xdt"></div>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
</body>
<script type="text/javascript">
    window.onscroll = function(){
        var scroll =document.documentElement.scrollTop; //获取到当前页面顶部距离
        var xtd = document.getElementById("xdt") 
         if (scroll>250) {
            xdt.style.position = 'fixed';
            xdt.style.top = "0"
            xdt.style.zIndex = "999"
            xdt.style.left = '50%'
            xdt.style.marginLeft = "-595px" 
         }else{
            xdt.style.position = "static"
            xdt.style.margin = "0 auto"
         }
xdt.className = abc
    }
</script>
</html>