1. 效果预览

电梯导航

HTML

<ul class="nav" id="nav">
  <li id="view1" class="active">第一章</li>
  <li id="view2">第二章</li>
  <li id="view3">第三章</li>
  <li id="view4">第四章</li>
  <li id="view5">第五章</li>
</ul>
<div class="container">
  <div class="item view1" data-view="view1" style="background:aqua;">
    第一章
  </div>
  <div class="item view2" data-view="view2" style="background: blueviolet;">
    第二章
  </div>
  <div class="item view3" data-view="view3" style="background: chartreuse;">
    第三章
  </div>
  <div class="item view4" data-view="view4" style="background: darkgoldenrod;">
    第四章
  </div>
  <div class="item view5" data-view="view5" style="background: firebrick;">
    第五章
  </div>
</div>

javascript

let navBox = document.querySelector("#nav");
let container = document.querySelector(".container");
function changeStyle(target) {
  Array.from(navBox.children).forEach((item) => {
    item.classList.remove("active");
  });
  target.classList.add("active");
}
navBox.addEventListener(
  "click",
  function (e) {
    let target = e.target;
    if (target.id && target.nodeName === "LI") {
      changeStyle(target);
      let parentElement = target.parentElement; // 获取父元素
      document.querySelector("." + target.id).scrollIntoView({
        behavior: "smooth",
        block: "start",
      });
    }
  },
  false
);

let observer = new IntersectionObserver(
  function (entries) {
    entries.forEach((entry) => {
      if (entry.isIntersecting && entry.intersectionRatio > 0.66) {
        const el = document.querySelector("#" + entry.target.dataset.view);
        changeStyle(el);
      }
    });
  },
  {
    root: container,
    threshold: [0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8],
  }
);

document.querySelectorAll(".item").forEach((el) => {
  observer.observe(el);
});

CSS

.nav {
  display: flex;
  justify-content: space-evenly;
  height: 40px;
  line-height: 40px;
}

li:hover {
  background-color: pink;
  font-weight: 700;
  cursor: pointer;
}

.active {
  background-color: pink;
  font-weight: 700;
}

.container {
  height: 300px;
  overflow: auto;
}

.item {
  height: 200px;
}

2. 原理解析

1. 点击右边的导航菜单，利用 scrollIntoView 方法使内容区域对应的元素出现在可视区域中。
2. 页面容器滚动时，当目标元素出现在检测区域内则联动改变对应导航的样式。

版权所有

版权归属：tuyongtao1

许可证：署名 4.0 国际 (CC-BY-4.0)