● 所谓的粘贴式导航，就是当我们滑动页面到某一个位置的时候，导航不会因为滑动而消失，会固定在页面的顶部，我们来看一下如何实现；
● 首先我们要获取我们想要滚动到哪一部分的时候让导航栏显示出来，这就需要我们去获取这一部分的相对于视口的一个位置信息
const section1 = document.querySelector('#section--1');
const initialCoords = section1.getBoundingClientRect();
.getBoundingClientRect(): 这是JavaScript中DOM元素上可用的方法。调用此方法会返回一个 DOMRect 对象，该对象提供了有关元素大小及其相对于视口的位置信息。
● 当我们获取了我们想要移动到那一部分位置信息时候，我们就要来是的导航显示出来，并进行准确的定位
window.addEventListener('scroll', function () {
if (window.scrollY > initialCoords.top) nav.classList.add('sticky');
else nav.classList.remove('sticky');
});
- window.addEventListener(‘scroll’, function () { … })：
○ 这是通过 addEventListener 方法向 window 对象添加了一个滚动事件的监听器。每当用户滚动页面时，绑定的函数就会被触发。 - if (window.scrollY > initialCoords.top)：
○ window.scrollY 表示当前页面滚动的垂直距离（即滚动条距离页面顶部的距离）。
○ initialCoords.top 是之前通过 getBoundingClientRect() 获取到的 section1 元素顶部相对于视口的位置。 - nav.classList.add(‘sticky’) 和 nav.classList.remove(‘sticky’)：
○ nav 是一个导航条（或菜单）的引用。
○ 如果 window.scrollY 大于 initialCoords.top，表示用户已经滚动到了 section1 元素的顶部以上，此时会给 nav 元素添加一个 sticky 类名。
○ 如果不满足上述条件（即用户未滚动到 section1 顶部以上），则会移除 nav 元素的 sticky 类名。
● 关于这个sticky类名，我们之前就写好，我们来看下它的作用
.nav.sticky {
position: fixed; //CSS 中的定位属性，将导航条固定在视口中的位置，不随页面滚动而移动。
background-color: rgba(255, 255, 255, 0.95); //透明度降低
}
这样的我们就能实现一个简单的粘性导航的效果；
这种实现粘性导航的方式基本上是比较简单和常见的方法，但是也存在一些潜在的缺点需要考虑：
- 性能问题：
○ 监听 scroll 事件可能会导致性能问题，特别是在页面有大量内容或者复杂的 DOM 结构时。因为每次滚动都会触发事件处理程序，可能会对页面的流畅性产生一定影响。 - 重复计算：
○ getBoundingClientRect() 方法在每次滚动时都会重新计算 section1 元素相对于视口的位置。尽管现代浏览器通常对此进行了优化，但如果页面有很多这样的计算，仍可能导致微小的性能损失。 - 过渡效果：
○ 如果希望实现粘性导航的过渡效果（如淡入淡出、滑动等），这种简单的添加/移除类名的方法可能无法满足需求。此时可能需要额外的 JavaScript 或 CSS 动画来实现更复杂的效果。 - 兼容性：
○ 虽然大多数现代浏览器都支持 getBoundingClientRect() 和 classList，但在某些较旧的浏览器或设备上可能存在兼容性问题。在这种情况下，可能需要提供备用方案或者使用 polyfill 来解决兼容性问题。 - 复杂布局处理：
○ 如果页面布局比较复杂，可能会涉及多个元素在不同滚动阶段需要切换粘性导航状态。这时候可能需要更复杂的 JavaScript 逻辑来处理不同情况下的导航行为。
下节课，我们将介绍一种更好的粘性导航的一种方案
