如何使用 JavaScript 实现一个简单的导航栏悬浮功能？

使用 JavaScript 实现导航栏悬浮

要实现一个简单的导航栏悬浮功能，你需要使用：

• Javascript 监听滚动事件
• CSS 来设置相应的样式

可以利用 Javascript 的 addEventListener() 方法来添加滚动事件触发器，检测滚动时导航栏是否处于可视区域内。

//集中在滚动事件和元素上面
window.addEventListener('scroll',() => {
   const navbar = document.querySelector("nav.navbar");
    
   //如果滚动超出可视区域20像素时
   if(window.scrollY > 20){ 
      //为导航条的添加 fixed 类
      navbar.classList.add("fixed") 
   }else{ 
      //从导航条挤出 fixed 类
      navbar.classList.remove("fixed") 
   }
});

如果要实现导航栏悬浮，CSS 还必须设置 .fixed 类，使它才能固定在页面上。.fixed {
position: fixed;
top: 0;
left: 0;
width: 100vw;
z-index: 1000;
}