如果仅仅想把导航栏固定，添加以下属性即可：
代码语言：javascript复制style="position: sticky;"注：前提是你已经写好了导航栏。
如果想将导航栏下滑悬浮透明，请参照如下方式：
给 header盒子(整个导航的盒子)添加 id="headerTop"
并添加以下css样式：
代码语言：javascript复制#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效果实现滑动检测：
代码语言：javascript复制<script>
// 使顶部导航栏下滑显示，上滑透明
// 添加滚动事件
window.addEventListener('scroll', function() {
//获取元素
var header = document.querySelector("header"); //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
// 添加类
header.classList.toggle("sticky", window.scrollY > 0)
});
</script>如果实现不了，请自行查找搜索哈，差不多就是依据这些。
