H5页面吸顶效果实现(两种实现方式！！)

最新推荐文章于 2025-10-21 21:02:13 发布

原创最新推荐文章于 2025-10-21 21:02:13 发布 · 置顶 · 1.1w 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#原生js

H5 同时被 2 个专栏收录

1 篇文章

订阅专栏

吸顶效果

1 篇文章

订阅专栏

博客介绍了两种实现吸顶效果的方式。一是使用 CSS 粘性定位 position: sticky 属性，给子元素设置 position: sticky; top:0，父元素添加 position: relative。二是使用滚动条滑动事件 onscroll，用 JS 监听滚动距离，手动设置子元素 position: fixed。还提及了两种方式的兼容性。

部署运行你感兴趣的模型镜像

首先看一下效果

效果图片

总共可以有两种方式实现

第一种使用css 粘性定位 position: sticky; 属性实现

首先给需要吸顶效果的子元素设置 position: sticky; top:0; 给父元素添加 position :relative;

position:sticky; 在屏幕范围内不受 left ，top 影响，当到元素接近偏移区域是会变成 fixed，会自动固定在 top ，left 等实现粘性吸顶！它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。

  position: -webkit-sticky;//safari 里这样写

目前兼容

<style>
    .showdiv{
        width:1200px;
        height: 1200px;
        background-color: #666666;
        margin:0px auto;
    }
    .headdiv{
         width: 100%;
         height: 50px;
         position: sticky;
         top: 0px;
         background-color: #2aabd2;
    }
    .main{
         position: relative;
    }
    .headtop{
         height: 50px;
    }
</style>
<body >
<!--第一种-->
    <div class="main">
        <div class="headtop">

        </div>
        <div class="headdiv">

        </div>
        <div class="showdiv">

        </div>
    </div>
</body>

第二种使用 滚动条滑动事件 onscroll 实现

这种方式使用js 事件监听滚动条滑动的距离手动设置子元素position:fixed 实现。

使用 document.body.scrollTop; 得到滚动条距离顶部的高，判断超过偏移区域是手动加入position:fixed ；top:0px ; zindex:2

<!--第二种-->
    <div class="main">
        <div class="headtop">

        </div>
        <div class="headdiv">

        </div>
        <div class="showdiv">

        </div>
    </div>
</body>
<script>
    var scrollT=document.body.scrollTop;
    var headdiv=document.querySelector(".headdiv");
    function s(){
        if(document.documentElement.scrollTop >= 50){
            headdiv.style.position="fixed";
            headdiv.style.top="0px";
            headdiv.style.zIndex="2";
        }else{
            headdiv.style.position="relative";
        }
    }
    console.log(document.body);
</script>

目前兼容 Chrome,Firefox,Opera, , 不兼容 IE，Safari 。

这期就写到这里。有什么问题大家可以留言指出。

溜了溜了