使用 Intersection Observer 实现滚动时导航栏动态收缩效果-html教程-PHP中文网

引言

核心概念：Intersection Observer API

实现步骤

1. HTML 结构准备

2. CSS 样式定义

3. JavaScript 交互逻辑

示例代码

注意事项与优化

总结

首页

web前端

html教程

使用 Intersection Observer 实现滚动时导航栏动态收缩效果

DDD

Oct 09, 2025 pm 11:21 PM

使用 Intersection Observer 实现滚动时导航栏动态收缩效果

本文详细介绍了如何利用 JavaScript 的 Intersection Observer API 和 CSS 实现一个在页面滚动时自动收缩的响应式导航栏。通过监听特定区域的可见性变化，导航栏的高度和内部元素（如Logo）的尺寸会动态调整，从而优化移动和平板设备上的用户体验，提升网站的专业度和用户友好性。

引言

在现代网页设计中，导航栏（Navbar）是用户与网站互动的重要组成部分。为了提供更流畅的用户体验，尤其是在移动和平板设备上，当用户向下滚动页面时，导航栏自动收缩并减小其高度，同时可能缩小Logo，是一种常见且高效的设计模式。这种设计不仅节省了屏幕空间，还能让用户更专注于内容，同时保持导航功能随时可用。本文将详细讲解如何利用 Intersection Observer API 结合 CSS 来实现这一动态收缩效果。

核心概念：Intersection Observer API

传统的导航栏收缩效果通常依赖于监听 scroll 事件。然而，scroll 事件在短时间内可能触发多次，导致性能开销较大，尤其是在移动设备上。Intersection Observer API 提供了一种更高效、更现代的解决方案。

Intersection Observer 允许我们异步观察目标元素与其祖先元素（或文档视口）交叉状态的变化。它不会在每次滚动时都触发，而是在目标元素进入或离开指定区域时才触发回调函数，从而大大减少了性能负担。这使得它成为实现滚动时导航栏收缩等效果的理想选择。

实现步骤

实现一个滚动时收缩的导航栏主要包括三个部分：HTML结构、CSS样式和 JavaScript 逻辑。

1. HTML 结构准备

首先，我们需要一个清晰的 HTML 结构，包括导航栏本身和一个作为观察目标的起始内容区域。导航栏通常是一个

或



    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态收缩导航栏</title>
    <link rel="stylesheet" href="style.css">


    <header>
        <div class="logo">网站Logo</div>
        <nav>
            <!-- 导航菜单项 -->
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#services">服务</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>

    <section id="home">
        <h1>欢迎来到我们的网站</h1>
        <p>向下滚动查看更多内容</p>
    </section>

    <section id="about">
        <h2>关于我们</h2>
        <p>这是关于我们的一些信息...</p>
    </section>

    <section id="services">
        <h2>我们的服务</h2>
        <p>我们提供各种优质服务...</p>
    </section>

    <section id="contact">
        <h2>联系我们</h2>
        <p>期待您的来信...</p>
    </section>

    <script src="script.js"></script>

在这个结构中：

元素作为我们的导航栏容器。
代表网站的 Logo。
是我们页面顶部的第一个内容区域，我们将观察它与视口的交叉状态来触发导航栏的收缩。

2. CSS 样式定义

CSS 负责定义导航栏的初始样式、收缩后的样式以及两者之间的平滑过渡。

/* 通用重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
    list-style: none;
}

/* 导航栏基础样式 */
header {
    position: fixed; /* 固定在视口顶部 */
    top: 0;
    left: 0;
    width: 100%;
    height: 70px; /* 初始高度 */
    background-color: #232323; /* 背景色 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    transition: all 0.3s ease-in-out; /* 所有属性变化的平滑过渡 */
    z-index: 1000; /* 确保导航栏在最上层 */
    color: #dad7d7; /* 文字颜色 */
}

header .logo {
    font-size: 30px; /* 初始Logo字体大小 */
    font-weight: bold;
    transition: font-size 0.3s ease-in-out; /* Logo字体大小的平滑过渡 */
}

header nav ul {
    display: flex;
    gap: 20px;
}

header nav ul li a {
    color: #dad7d7;
    font-size: 18px;
    transition: color 0.3s ease-in-out;
}

header nav ul li a:hover {
    color: #ffffff;
}

/* 导航栏收缩状态样式 */
header.nav-scrolled {
    height: 45px; /* 收缩后的高度 */
    background-color: rgba(35, 35, 35, 0.9); /* 半透明背景 */
    backdrop-filter: blur(5px); /* 毛玻璃效果 */
}

header.nav-scrolled .logo {
    font-size: 20px; /* 收缩后Logo字体大小 */
}

/* 内容区域样式 */
section {
    height: 100vh; /* 每个section占据一个视口高度 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: #fff;
    text-align: center;
    padding-top: 70px; /* 留出导航栏的高度 */
}

#home {
    background-color: #1a1a1a;
}

#about {
    background-color: #333333;
}

#services {
    background-color: #444444;
}

#contact {
    background-color: #555555;
}

关键点：

header 设置 position: fixed 和 transition: all 0.3s ease-in-out，实现固定定位和所有属性变化的平滑过渡。
.logo 也设置了 transition，确保 Logo 大小变化平滑。
.nav-scrolled 类定义了导航栏收缩后的样式，包括更小的高度和 Logo 字体大小。

3. JavaScript 交互逻辑

JavaScript 部分负责使用 Intersection Observer 监听 #home 区域，并在其离开视口时为

添加或移除 .nav-scrolled 类。

// 获取DOM元素
const header = document.querySelector('header');
const sectionHome = document.querySelector("#home"); // 观察目标元素

// Intersection Observer 的配置选项
const sectionHomeOptions = {
  rootMargin: "-200px 0px 0px 0px" // 顶部200px的边距，意味着在 #home 顶部离开视口200px时触发
};

// 创建 Intersection Observer 实例
const sectionHomeObserver = new IntersectionObserver(function(
  entries,
  observer // 观察器实例本身
) {
  entries.forEach(entry => {
    // 当 #home 元素不再与视口交叉时 (即滚动到 #home 区域下方)
    if (!entry.isIntersecting) {
      header.classList.add("nav-scrolled"); // 添加收缩类
    } else {
      // 当 #home 元素与视口交叉时 (即滚动回 #home 区域)
      header.classList.remove("nav-scrolled"); // 移除收缩类
    }
  });
},
sectionHomeOptions); // 应用配置选项

// 开始观察 #home 元素
sectionHomeObserver.observe(sectionHome);

代码解释：

header 和 sectionHome 分别引用了导航栏和作为观察目标的 home 部分。
sectionHomeOptions 定义了 rootMargin: "-200px 0px 0px 0px"。这意味着当 sectionHome 元素的顶部距离视口顶部还有 200px 时，Intersection Observer 就会触发。如果 rootMargin 为 0px，则只有当 sectionHome 完全离开视口时才会触发。通过调整这个值，可以控制导航栏收缩的提前量。
IntersectionObserver 的回调函数会接收一个 entries 数组，其中包含所有被观察元素的交叉信息。我们遍历 entries，检查 entry.isIntersecting 属性。
如果 !entry.isIntersecting 为真，表示 sectionHome 已经离开了视口（或 rootMargin 定义的区域），此时我们为 header 添加 nav-scrolled 类。
反之，如果 entry.isIntersecting 为真，表示 sectionHome 重新进入了视口，我们则移除 nav-scrolled 类。
最后，调用 sectionHomeObserver.observe(sectionHome) 开始观察 sectionHome 元素。

示例代码

将上述 HTML、CSS 和 JavaScript 代码分别保存为 index.html、style.css 和 script.js，并在同一目录下。

index.html



    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态收缩导航栏</title>
    <link rel="stylesheet" href="style.css">


    <header>
        <div class="logo">网站Logo</div>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#services">服务</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>

    <section id="home">
        <h1>欢迎来到我们的网站</h1>
        <p>向下滚动查看更多内容</p>
    </section>

    <section id="about">
        <h2>关于我们</h2>
        <p>这是关于我们的一些信息...</p>
    </section>

    <section id="services">
        <h2>我们的服务</h2>
        <p>我们提供各种优质服务...</p>
    </section>

    <section id="contact">
        <h2>联系我们</h2>
        <p>期待您的来信...</p>
    </section>

    <script src="script.js"></script>

style.css

/* 通用重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
    list-style: none;
}

/* 导航栏基础样式 */
header {
    position: fixed; /* 固定在视口顶部 */
    top: 0;
    left: 0;
    width: 100%;
    height: 70px; /* 初始高度 */
    background-color: #232323; /* 背景色 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    transition: all 0.3s ease-in-out; /* 所有属性变化的平滑过渡 */
    z-index: 1000; /* 确保导航栏在最上层 */
    color: #dad7d7; /* 文字颜色 */
}

header .logo {
    font-size: 30px; /* 初始Logo字体大小 */
    font-weight: bold;
    transition: font-size 0.3s ease-in-out; /* Logo字体大小的平滑过渡 */
}

header nav ul {
    display: flex;
    gap: 20px;
}

header nav ul li a {
    color: #dad7d7;
    font-size: 18px;
    transition: color 0.3s ease-in-out;
}

header nav ul li a:hover {
    color: #ffffff;
}

/* 导航栏收缩状态样式 */
header.nav-scrolled {
    height: 45px; /* 收缩后的高度 */
    background-color: rgba(35, 35, 35, 0.9); /* 半透明背景 */
    backdrop-filter: blur(5px); /* 毛玻璃效果 */
}

header.nav-scrolled .logo {
    font-size: 20px; /* 收缩后Logo字体大小 */
}

/* 内容区域样式 */
section {
    height: 100vh; /* 每个section占据一个视口高度 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: #fff;
    text-align: center;
    padding-top: 70px; /* 留出导航栏的高度 */
}

#home {
    background-color: #1a1a1a;
}

#about {
    background-color: #333333;
}

#services {
    background-color: #444444;
}

#contact {
    background-color: #555555;
}

script.js

// 获取DOM元素
const header = document.querySelector('header');
const sectionHome = document.querySelector("#home"); // 观察目标元素

// Intersection Observer 的配置选项
const sectionHomeOptions = {
  rootMargin: "-200px 0px 0px 0px" // 顶部200px的边距，意味着在 #home 顶部离开视口200px时触发
};

// 创建 Intersection Observer 实例
const sectionHomeObserver = new IntersectionObserver(function(
  entries,
  observer // 观察器实例本身
) {
  entries.forEach(entry => {
    // 当 #home 元素不再与视口交叉时 (即滚动到 #home 区域下方)
    if (!entry.isIntersecting) {
      header.classList.add("nav-scrolled"); // 添加收缩类
    } else {
      // 当 #home 元素与视口交叉时 (即滚动回 #home 区域)
      header.classList.remove("nav-scrolled"); // 移除收缩类
    }
  });
},
sectionHomeOptions); // 应用配置选项

// 开始观察 #home 元素
sectionHomeObserver.observe(sectionHome);

注意事项与优化

性能优势：Intersection Observer 相较于 scroll 事件监听器，在性能上具有显著优势。它只在目标元素与根元素交叉状态发生变化时才触发回调，避免了频繁的计算和DOM操作，使得页面滚动更加流畅。
rootMargin 的灵活运用：通过调整 rootMargin 的值，可以精确控制导航栏收缩触发的时机。例如，设置为负值可以在目标元素完全离开视口前就触发收缩；设置为正值则可以在目标元素进入视口一定距离后才触发。
动画平滑性：CSS 的 transition 属性是实现平滑动画的关键。确保对导航栏高度、Logo大小等变化的属性都设置了合适的 transition 属性，以提供更好的视觉体验。
响应式设计：虽然 Intersection Observer 本身是响应式的，但如果希望导航栏收缩效果仅在特定屏幕尺寸（如移动设备和平板）上生效，可以结合 CSS 媒体查询 (@media) 来限制 .nav-scrolled 样式的应用范围。例如：
```
@media (max-width: 960px) { /* 仅在屏幕宽度小于960px时生效 */
    header.nav-scrolled {
        height: 45px;
        /* ... 其他收缩样式 */
    }
    header.nav-scrolled .logo {
        font-size: 20px;
    }
}
```
浏览器兼容性：Intersection Observer API 在现代浏览器中得到了广泛支持。对于需要支持旧版浏览器的项目，可能需要引入 Polyfill（例如 intersection-observer npm 包）来确保兼容性。
Logo 处理：如果 Logo 是图片，除了调整字体大小，还需要在 CSS 中调整 img 元素的 width 或 height 属性，并同样添加 transition 确保平滑缩放。