css导航栏随页面滚动

CSS导航栏随页面滚动往往是现代网站设计的常用技术之一，它不仅可以让网站看起来更加美观大方，还可以提高用户体验，为用户提供更加顺畅的浏览体验。

下面我们来看一下如何通过CSS实现导航栏随页面滚动。

nav {
  position: fixed; // 将导航栏设置为固定定位
  top: 0; // 将导航栏置于页面顶部
  width: 100%; // 设置导航栏宽度为100%
  background-color: #ffffff; // 设置导航栏的背景颜色
  Box-shadow: 0px 4px 4px rgba(0,0.25); // 添加一个阴影效果
  z-index: 999; // 设置导航栏的层级，避免被其他元素遮挡
  transition: top 0.3s ease-in-out; // 添加一个平滑过渡效果
}

// 监听页面滚动事件
window.addEventListener('scroll',function() {
  if (window.pageYOffset > 100) { // 当页面滚动超过100个像素时
    nav.style.top = '-80px'; // 将导航栏的top属性设置为-80px，即导航栏隐藏在页面顶部
  } else {
    nav.style.top = '0'; // 如果页面滚动小于100个像素，将导航栏的top属性设置为0，即导航栏显示在页面顶部
  }
});

上述代码中，我们通过固定定位将导航栏置于页面顶部，并添加了一些样式效果。我们还监听了滚动事件，通过改变导航栏的top属性值实现导航栏的显示和隐藏。

最后附上一个效果图，希望对你有所帮助。