提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

JS 实现 导航 透明 下滑 悬浮 置顶
2023-06-13 09:14:04 时间

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

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>

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

相关文章