● 所谓的粘贴式导航,就是当我们滑动页面到某一个位置的时候,导航不会因为滑动而消失,会固定在页面的顶部,我们来看一下如何实现;
● 首先我们要获取我们想要滚动到哪一部分的时候让导航栏显示出来,这就需要我们去获取这一部分的相对于视口的一个位置信息
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 逻辑来处理不同情况下的导航行为。
下节课,我们将介绍一种更好的粘性导航的一种方案