用JavaScript写的吸顶条

最新推荐文章于 2024-07-09 12:44:42 发布

原创最新推荐文章于 2024-07-09 12:44:42 发布 · 373 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#onscroll #sctollTop #吸顶条 #JavaScript

本文介绍了一种网页设计技巧，通过监听文档滚动事件并利用scrollTop属性，实现特定元素如广告或搜索框在滚动到一定位置后固定显示在窗口顶部。此方法结合了HTML、CSS和JavaScript，适用于网站头部组件始终保持可见的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常用在网站顶部的广告或者搜索引擎，当滚动条往下滚动到一定位置时，顶部的广告和搜索固定定位在窗口的顶部，达到一直显示在窗口的效果。

思路

当滚动条滚动到一定位置时，所匹配的元素固定定位在窗口的上方。这其中利用了scrollTop：返回滚动条的垂直位置，文档滚动事件onscroll当文档滚动时发生的事件。

代码片段

css部分

<style type="text/css">
        .dt{
            height:50px;
            width:100%;
            background-color: yellow;
            margin-top: 600px;
        }
        .ding{
            height:50px;
            width:100%;
            background-color: yellow;
            position: fixed;
            top: 0px;
            left:0px;
        }
    </style>

HTML部分

<div class="dt"></div>

JS部分

<script type="text/javascript">
    var dt=document.getElementsByClassName("dt")[0];         //获取div元素
    window.function(){                              //文档滚动事件，当文档滚动的时候发生的函数
        var a=document.documentElement.scrollTop||document.body.scrollTop;//返回滚动条的垂直位置
        if(a>600){                                           //当距离大于600也就是div到顶部的距离时
            dt.className="ding";                             //更改类的css，固定定位
        }else{
            dt.className="dt";
        }
    }
</script>