css导航固定固定定位

CSS 导航固定定位是一种在页面滚动时保持导航栏固定的技术。它可以让用户在任何时刻都能方便地使用导航功能，而不必担心导航栏被卷走。

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  z-index: 999;
}

在上面的代码中，我们使用了 position: fixed; 属性来固定导航栏。我们还设置了 top: 0; 和 left: 0; 属性，将导航栏放置在页面的左上角。我们还设置了 width: 100%; 属性，使导航栏的宽度与页面一样。同时，我们为它设置了一个高优先级的 z-index 属性，使其始终出现在其他元素的上面。

如果您需要在滚动时隐藏固定的导航栏，可以使用 JavaScript。下面是一个简单的示例：

let prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  let currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.querySelector(".navbar").style.top = "0";
  } else {
    document.querySelector(".navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

在上面的代码中，我们定义了一个名为 prevScrollpos 的变量来存储上一次的滚动位置。然后，我们添加了一个滚动事件，以便在滚动时检测当前的滚动位置。如果当前的滚动位置小于上一次的滚动位置，则将导航栏显示出来。如果当前的滚动位置大于上一次的滚动位置，则将导航栏隐藏起来。最后，我们更新 prevScrollpos 变量以存储当前的滚动位置。

CSS 导航固定定位是一个非常有用的技术，它可以提高用户体验。如果您需要在网站上添加导航栏，请考虑使用它。