JS实现导航栏下滑悬浮透明置顶

岳泽以

发布于 2022-10-26 17:12:44

6.4K0

发布于 2022-10-26 17:12:44

文章被收录于专栏：岳泽以博客

如果仅仅想把导航栏固定，添加以下属性即可：

style="position: sticky;"

注：前提是你已经写好了导航栏。

如果想将导航栏下滑悬浮透明，请参照如下方式：

给 header盒子(整个导航的盒子)添加 id="headerTop"

并添加以下css样式：

#headerTop{
    /*使导航栏固定在顶部*/
    position: fixed;   
    top:0;
    left: 0px;
    z-index: 1000;    /*一开始就不给导航栏设置背景色*/
    background-color: rgb(247, 247, 247);
}

#headerTop.sticky{
    background-color: rgb(247, 247, 247, 0.9);
     border-bottom: 1px solid #e2e8f0;
}

重要：添加JS效果实现滑动检测：

<script>
    // 使顶部导航栏下滑显示，上滑透明
    // 添加滚动事件
    window.addEventListener('scroll', function() {
        //获取元素
        var header = document.querySelector("header"); //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
        // 添加类
        header.classList.toggle("sticky", window.scrollY > 0)
    });
</script>

如果实现不了，请自行查找搜索哈，差不多就是依据这些。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022 年 04 月，如有侵权请联系 cloudcommunity@tencent.com 删除

css