如何创建：粘性/固定导航栏

学习如何使用 CSS 和 JavaScript 创建一个“粘性”导航栏。

亲自试一试

如何创建粘性导航栏

第一步 - 添加 HTML：

创建导航栏：

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

第二步 - 添加 CSS：

设置导航栏样式：

/* 设置导航栏样式 */
#navbar {
  overflow: hidden;
  background-color: #333;
}

/* 导航栏链接 */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

/* 页面内容 */
.content {
  padding: 16px;
}

/* 当到达其滚动位置时，通过 JS 将 sticky 类添加到导航栏中 */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* 为页面内容添加一些上内边距，以防止突然的快速移动（因为导航栏在页面顶部获得新位置（position:fixed 和 top:0）） */
.sticky + .content {
  padding-top: 60px;
}

第三步 - 添加 JavaScript：

// 当用户滚动页面时，执行myFunction
window.onscroll = function() {myFunction()};

// 获取导航栏
var navbar = document.getElementById("navbar");

// 获取导航栏的偏移位置
var sticky = navbar.offsetTop;

// 当您到达导航栏的滚动位置时，为其添加 sticky 类。当您离开滚动位置时，移除 "sticky" 类。
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

亲自试一试