手写带定位功能的滑动置顶菜单的实现

前端

2023-12-29 14:26:31

滑动置顶菜单：增强网站用户体验的交互元素

什么是滑动置顶菜单？

在现代网站中，菜单通常是引导用户浏览网站内容的重要导航工具。随着网站的复杂性和用户期望的不断提高，滑动置顶菜单应运而生，它将导航便利性提升到了一个新的高度。

滑动置顶菜单是指当用户向下滚动页面时，菜单栏会固定在屏幕顶部，让用户可以随时点击菜单项，直接跳转到页面中的特定位置。这种交互元素不仅美观，而且极大地改善了用户体验，让网站浏览更加流畅高效。

如何实现滑动置顶菜单？

实现滑动置顶菜单需要几个关键步骤：

定义菜单结构： 使用 HTML 和 CSS 创建导航栏，并为每个菜单项指定唯一的 ID。
实现滑动置顶效果： 使用 JavaScript 监听滚动事件，当用户滚动到一定位置时，通过 CSS 的 position: fixed 属性将菜单固定在顶部。
添加定位功能： 为每个菜单项添加点击事件侦听器，当用户点击菜单项时，计算目标元素在页面中的偏移量，然后使用 JavaScript 的 scrollTo() 方法将页面滚动到该偏移量。
高亮当前菜单项： 为了帮助用户了解他们在页面中的位置，可以动态高亮当前激活的菜单项，通过监听滚动事件并比较每个菜单项与当前滚动位置的关系来实现。

示例代码

以下示例代码演示了如何实现一个带定位功能的滑动置顶菜单：

<nav id="menu">
  <a href="#section1" id="menu-item-1">Section 1</a>
  <a href="#section2" id="menu-item-2">Section 2</a>
  <a href="#section3" id="menu-item-3">Section 3</a>
</nav>

<script>
  window.addEventListener("scroll", function() {
    if (window.pageYOffset > 100) {
      document.getElementById("menu").classList.add("fixed");
    } else {
      document.getElementById("menu").classList.remove("fixed");
    }
  });

  document.querySelectorAll("nav a").forEach(function(link) {
    link.addEventListener("click", function(e) {
      e.preventDefault();
      var targetElement = document.getElementById(this.getAttribute("href").slice(1));
      window.scrollTo({
        top: targetElement.offsetTop,
        behavior: "smooth"
      });
    });
  });

  window.addEventListener("scroll", function() {
    var sections = document.querySelectorAll("section");
    sections.forEach(function(section) {
      if (window.pageYOffset > section.offsetTop - 100) {
        document.querySelector("nav a[href='#" + section.id + "']").classList.add("active");
      } else {
        document.querySelector("nav a[href='#" + section.id + "']").classList.remove("active");
      }
    });
  });
</script>