滚动时高亮粘性子导航菜单选项指南

2024-03-15 04:23:39

如何实现滚动时高亮粘性子导航菜单选项

简介

粘性导航栏是网站设计中的一种常见元素，它可以随着页面滚动而保持固定在顶部。为了提升用户体验，我们需要对粘性子导航菜单选项进行高亮显示，以指示用户当前所在的位置。本文将探讨如何使用 JavaScript 和 Intersection Observer API 来实现这一功能。

Intersection Observer API

Intersection Observer API 允许我们监视目标元素与视口的相对位置。它提供了一个回调函数，该函数在目标元素进入或离开视口时被调用。我们可以利用这个 API 来检测用户是否滚动到特定的子导航菜单选项。

实现步骤

获取元素的引用

获取粘性导航栏和子导航菜单选项的 DOM 元素引用。
创建 Intersection Observer

创建一个 Intersection Observer 实例，并指定回调函数。
观察子导航菜单选项

将 Intersection Observer 实例应用到每个子导航菜单选项。
处理交叉

在回调函数中，检查每个子导航菜单选项是否进入或离开视口。如果元素进入视口，可以将高亮样式应用到该元素。
优化性能

为了优化性能，可以使用节流函数来限制回调函数的调用频率。

示例代码

// 获取元素的引用
const stickyNav = document.getElementById('sticky-nav');
const subnavOptions = document.querySelectorAll('#sticky-nav a');

// 创建 Intersection Observer
const options = {
  root: null, // 使用视口作为根元素
  threshold: 0.5 // 当目标元素进入视口 50% 时触发回调函数
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    // 在回调函数中处理与视口的交叉
    if (entry.isIntersecting) {
      entry.target.classList.add('is-active'); // 应用高亮样式
    } else {
      entry.target.classList.remove('is-active'); // 移除高亮样式
    }
  });
});

// 观察子导航菜单选项
subnavOptions.forEach((option) => {
  observer.observe(option);
});

// 优化性能
window.addEventListener('scroll', throttle((e) => {
  // 仅在节流时间间隔后执行回调函数
}, 100)); // 100 毫秒的节流间隔