前言
这回整点不一样的，每次都是写CSS，这次使用原生JS代码来实现粘性导航栏。粘性导航栏大伙肯定都有所了解，其实通过定位属性中的粘性定位sticky也是可以实现的。但是今天我们就是不走寻常路，使用原生JS来实现它。
效果预览
具体效果如下所示。
HTML部分
内容部分我们就像普通导航栏那样简单设计一下就行，相关结构如下所示。
<header>
<a href="#" class="logo">Logo</a>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">作品</a></li>
<li><a href="#">联系</a></li>
</ul>
</header>
<header>是HTML5中定义头部区域的标签，用于包含网站的标题、导航和其他相关内容。我们创建了一个网站的头部区域，其中包含了一个带有logo和一个无序列表。这是一个基本的头部结构，可以使用CSS和JS进一步自定义和添加交互功能。
CSS部分
接下来这部分就是给导航栏添加相关样式，这里我们分为header，ul，li。
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
transition: 0.6s;
padding: 40px 100px;
z-index: 2;
}
我们首先为header元素添加了一系列样式。将元素的定位设置为固定位置，使其固定在视窗上方，设置为弹性布局，以便进行弹性盒子布局。justify-content: space-between;表示在弹性布局中，将元素的子项在横轴方向上两端对齐，并通过在它们之间留出空白空间来实现平均分布。z-index: 2;：将元素的堆叠顺序设置为2，使其位于其他元素之上。
综上所述，这段代码为header元素定义了固定的定位和一些布局样式。它使用了弹性盒子布局来使元素的子项在水平方向上分散对齐，并且在样式变化时，过渡效果会以0.6秒的持续时间进行平滑过渡。
然后轮到为<header>元素内的特定元素（.logo、ul、li、a）添加了一系列样式。
header .logo{
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0;
}
header ul{
......
}
header ul li{
......
}
header ul li a{
......
}
对于.logo的样式，它为.logo设置了字体样式、颜色、大小和转换等样式。对于ul、li和a元素，设置了相对定位、对齐方式、装饰风格和过渡效果等样式。这样的样式设置一般用于网站的头部导航栏外观效果。
JS部分
CSS部分解决了，现在就轮到JS部分了。实现粘性导航栏的作用就是在于JS代码，通过JS实现像stikcy那样的粘性导航栏这样的交互效果。
<script>
window.addEventListener('scroll',()=>{
let header = document.querySelector('header')
header.classList.toggle('sticky',window.scrollY>0)
})
</script>
首先添加了一个滚动事件监听器，当发生滚动时，就会执行回调函数，用于监听滚动事件并在滚动时添加或移除样式类。这里使用了.classList.toggle()方法来添加或移除sticky类名。如果window.scrollY大于0，则添加sticky类名，否则就移除它。sticky 类名用于实现页面滚动时固定在顶部的效果。通过添加或移除sticky类名，可以触发相应的CSS样式，从而实现让<header>元素在页面滚动时固定在顶部的效果。
然后我们在这里添加一下相关的CSS样式。
header.sticky{
padding: 5px 100px;
background: #fff;
}
header.sticky ul li a{
color: #000;
}
当<header>元素具有sticky类名时应用该样式。具有sticky类名的<header>元素将具有更小的内边距，并且背景颜色将更改为白色。此外，链接文本的颜色也会从之前的白色变为黑色。通过这些样式更改，可以在<header>元素固定在顶部时，为其添加不同的外观和可读性。
总结
到这里整个过程的实现就结束了，整体而言并不难，很好理解，大家可以多去琢磨几遍，更详细的代码可以前往码上掘金查看，相信你可以对粘性定位以及粘性导航栏会有更好的理解。
