固定导航（粘性导航、吸顶导航）

固定导航，又称粘性导航或吸顶导航，是指网站中的主导航栏在用户滚动页面时，当导航栏到达屏幕顶部或者某个高度时，会自动固定在浏览器窗口的顶部位置，不再随页面内容一起滚动。

目的

实现固定导航（粘性导航）功能

运用到的知识点

1、滚动事件监听：使用window.addEventListener('scroll', callback)监听窗口的滚动事件，或使用jQuery的$(window).on('scroll', callback)方法。

2、DOM操作与样式变更：在滚动事件回调函数中，通过document.querySelector()方法获取导航栏元素并直接修改样式属性（如element.style.position = 'fixed'）。

3、阈值判断：计算滚动条距离顶部的距离，当其达到预设阈值（如刚好要离开视口）时触发固定行为。可以使用window.scrollY方法获取高度位置。

本次实践在《简易首页制作》这个基础上调整。

步骤

1、添加事件监听和元素获取

在文档加载完成时，为窗口添加scroll事件监听器，并获取导航栏元素。

document.addEventListener("DOMContentLoaded", function () {
    const nav = document.querySelector('.nav');
    window.addEventListener("scroll", function () {
        const scrollTop = window.scrollY;
        // 固定导航效果代码将在此处编写
    });
});

2、通过阈值判断对样式做出变更

在滚动事件回调函数内部，根据滚动距离（scrollTop）与预设阈值的关系，动态更改导航栏样式。已给出的代码段提供了基本逻辑框架，但需稍作调整以提高性能和可维护性：

const threshold = 200; // 定义阈值为200px

// ... 在scroll事件回调函数内 ...

if (scrollTop > threshold) {
    // 导航栏固定到顶部
    nav.classList.add('fixed-nav'); // 添加固定样式类
} else {
    // 导航栏恢复原状
    nav.classList.remove('fixed-nav'); // 移除固定样式类
}

同时，在CSS文件中定义.fixed-nav样式类，包含固定导航所需的所有样式：

.fixed-nav {
    position: fixed;
    top: 0;
    width: 100%;
    /* 可根据需要添加其他样式，如背景色、边距、阴影等 */
}

3、完

扩展阅读

除了上述JavaScript方案外，现代浏览器支持使用CSS的position: sticky属性实现固定导航，无需任何JavaScript代码：

.nav {
    position: sticky;
    top: 0;
    /* 其他样式 */
}

尽管position: sticky简单易用，但它存在一定的兼容性问题，部分老旧或非标准浏览器可能不支持。在实际项目中，请根据目标浏览器范围权衡选择合适的实现方式。

效果演示

请查看效果演示以直观感受固定导航功能的实际效果。