滚动条上的粘性导航栏 - Javascript (1)

📌 相关文章

📜 滚动条上的粘性导航栏 - Javascript (1)

📅 最后修改于: 2023-12-03 15:11:09.056000 🧑 作者: Mango

滚动条上的粘性导航栏 - Javascript

在网页设计中，为了提高用户体验，经常会在页面上添加导航栏。当用户滚动页面时，为了方便用户访问页面中的其他部分，经常会设计一个粘性导航栏，即让导航栏始终保持在页面最顶部。本文将介绍如何使用Javascript实现滚动条上的粘性导航栏。

实现步骤

获取导航栏元素以及页面内容元素。

const nav = document.querySelector('.nav');
const content = document.querySelector('.content');

获取页面内容元素距离文档顶部的距离。

const contentTop = content.getBoundingClientRect().top + window.pageYOffset;

监听窗口滚动事件，计算滚动距离和导航栏与页面内容的距离，决定是否将导航栏设置为固定定位。

window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset;
  if (scrollTop >= contentTop) {
    nav.classList.add('fixed');
  } else {
    nav.classList.remove('fixed');
  }
});

在CSS中设置导航栏的固定定位样式。

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>滚动条上的粘性导航栏</title>
  <style>
    .nav {
      background-color: #fff;
      padding: 10px;
    }
    .content {
      height: 1000px;
      background-color: #f5f5f5;
    }
    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }
  </style>
</head>
<body>
  <nav class="nav">
    <ul>
      <li><a href="#">导航1</a></li>
      <li><a href="#">导航2</a></li>
      <li><a href="#">导航3</a></li>
    </ul>
  </nav>
  <div class="content"></div>
  <script>
    const nav = document.querySelector('.nav');
    const content = document.querySelector('.content');
    const contentTop = content.getBoundingClientRect().top + window.pageYOffset;
    window.addEventListener('scroll', () => {
      const scrollTop = window.pageYOffset;
      if (scrollTop >= contentTop) {
        nav.classList.add('fixed');
      } else {
        nav.classList.remove('fixed');
      }
    });
  </script>
</body>
</html>

总结

通过Javascript实现滚动条上的粘性导航栏，可以提高用户体验，方便用户访问页面中的其他部分。本文介绍了实现的基本步骤和完整代码，在使用时需要根据实际情况进行调整和优化。