自动折叠导航视频教程怎么做？-建站教程-锦华智联科技

视频教程总览

由于我无法直接嵌入视频，我将为您推荐几个优秀的视频教程，并按照不同技术栈进行分类,您可以根据自己的技术选择观看。

（图片来源网络，侵删）

纯 JavaScript / Vanilla JS 实现 (最通用)

这类教程不依赖任何外部库,适合所有前端开发者。

推荐视频: How to Create an Auto-Hiding Navbar with Vanilla JavaScript (由 The Net Ninja 制作)
- 优点: 讲解清晰，步骤简单，代码量少,易于理解和移植到任何项目中。
- 核心思路:
  1. 监听 window 的 scroll 事件。
  2. 记录上一次的滚动位置 (lastScrollTop)。
  3. 比较当前滚动位置和上一次的位置：
    - 如果向下滚动 (window.pageYOffset > lastScrollTop)，则添加一个隐藏导航栏的类（如 hide-nav）。
    - 如果向上滚动 (window.pageYOffset < lastScrollTop),则移除这个类。
  4. 更新 lastScrollTop 为当前滚动位置。
推荐视频: Auto Hide Navbar on Scroll - JavaScript Only (由 Traversy Media 制作)
- 优点: 同样是纯 JS 实现，但会讲解更多细节，比如如何处理滚动边界，以及如何优化性能（使用 requestAnimationFrame）。

使用 jQuery 实现 (适合旧项目或 jQuery 爱好者)

如果你的项目已经使用了 jQuery,这是最快实现的方式。

（图片来源网络，侵删）

推荐视频: jQuery Auto Hide Navbar on Scroll (由 Web Dev Simplified 制作)
- 优点: 代码极其简洁,几行代码就能搞定。
- 核心思路: 与纯 JS 类似，但使用 jQuery 的 scroll() 事件和 scrollTop() 方法来获取滚动位置，用 addClass() 和 removeClass() 来控制样式。

使用 React Hooks 实现 (现代 React 开发)

如果你在使用 React，利用 Hooks 可以实现一个可复用的自定义 Hook。

推荐视频: Create a Custom React Hook for Auto-Hiding Navbar (由 Web Dev Simplified 制作)
- 优点: 遵循 React 的最佳实践，代码模块化,可以在任何组件中轻松复用。
- 核心思路: 创建一个名为 useScroll 的自定义 Hook，该 Hook 内部管理滚动逻辑，并返回一个布尔值（isVisible）给组件使用,组件根据这个值来切换导航栏的类名。

图文详细步骤 (以纯 JavaScript 为例)

下面是详细的步骤，你可以跟着操作,亲手实现一个自动折叠导航。

第一步：创建 HTML 结构

创建一个简单的 HTML 文件，包含导航栏和一些占位内容,以便可以滚动。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">自动折叠导航</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav id="navbar">
        <a href="#">Logo</a>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">lt;/a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
    <!-- 页面内容 -->
    <div class="content">
        <h1>滚动页面查看效果</h1>
        <p>向下滚动，导航栏会隐藏；向上滚动，导航栏会显示。</p>
        <!-- 添加足够的内容以便滚动 -->
        <div style="height: 2000px; background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);">
            <p style="text-align: center; padding-top: 1000px;">你滚动到这里了吗？</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

第二步：添加 CSS 样式

创建 style.css 文件，设置导航栏的基本样式，并定义一个用于隐藏的类 .hide-nav。

/* body 样式，移除默认边距 */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}
/* 导航栏基本样式 */
#navbar {
    position: fixed; /* 固定定位 */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    box-sizing: border-box; /* 确保 padding 不会增加宽度 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: top 0.3s ease-in-out; /* 添加平滑的过渡效果 */
}
/* 导航链接样式 */
#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}
#navbar ul li {
    margin-left: 20px;
}
#navbar a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}
区域，为导航栏留出空间 */
.content {
    margin-top: 70px; /* 导航栏高度 + padding */
    padding: 20px;
}
/* 隐藏导航栏的类 */
.hide-nav {
    top: -70px; /* 向上移动，完全移出视口 */
}

第三步：编写 JavaScript 逻辑

创建 script.js 文件,这是实现自动折叠的核心。

// 获取导航栏元素
const navbar = document.getElementById('navbar');
// 初始化上一次的滚动位置
let lastScrollTop = 0;
// 监听滚动事件
window.addEventListener('scroll', () => {
    // 获取当前滚动位置
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    // 如果当前滚动位置大于上一次的滚动位置（向下滚动）
    if (scrollTop > lastScrollTop) {
        // 添加隐藏类
        navbar.classList.add('hide-nav');
    } else {
        // 否则（向上滚动），移除隐藏类
        navbar.classList.remove('hide-nav');
    }
    // 更新上一次的滚动位置
    lastScrollTop = scrollTop;
});

第四步：测试效果

将这三个文件 (index.html, style.css, script.js) 放在同一个文件夹中，用浏览器打开 index.html，然后滚动页面,你就能看到导航栏随着你的滚动方向自动隐藏和显示了！

优化与进阶

防止抖动: 快速滚动时，导航栏可能会频繁地显示和隐藏，显得有些抖动，可以通过设置一个“防抖”或“节流”函数来优化性能，例如在滚动事件中使用 requestAnimationFrame。
滚动到底部时始终显示: 当用户滚动到页面最底部时，导航栏应该显示出来，而不是隐藏，你可以在 JS 逻辑中增加一个判断：if (scrollTop + window.innerHeight >= document.body.offsetHeight)。
响应式设计: 确保在移动设备上也能正常工作，CSS 中的 transition 和 position 属性在移动端通常表现良好,但可能需要根据具体设计调整。

希望这份详细的图文教程和视频推荐能帮助你成功实现自动折叠导航！