当前位置：首页 > 行业动态 > 正文

headroom.js例子

“`html，，， new Headroom(document.querySelector(“.header”), {， tolerance: 5, // 触发距离， offset: 205 // 偏移量， }).init

Headroom.js 实现页面顶部栏滚动隐藏与显示的完整示例

Headroom.js 基础概念

Headroom.js 是一个轻量级 JavaScript 库，用于在用户滚动页面时自动隐藏或显示固定的顶部栏（如导航栏），从而提升移动端用户体验，其核心原理是通过监听滚动事件，判断用户滚动方向并触发对应的显示/隐藏逻辑。

实现步骤与代码示例

安装与引入

通过 CDN 引入

<!-引入 Headroom.js 和配套样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/headroom@1.0.3/dist/headroom.css">
<script src="https://cdn.jsdelivr.net/npm/headroom@1.0.3/dist/headroom.js"></script>

通过 npm 安装

headroom.js例子 第1张

npm install headroom --save

HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">Headroom.js 示例</title>
  <link rel="stylesheet" href="path/to/headroom.css">
  <style>
    / 自定义顶部栏样式 /
    .header {
      background: #007bff;
      color: white;
      padding: 15px;
      text-align: center;
      position: fixed; / 固定定位 /
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100; / 确保层级高于内容 /
    }
    / 内容区域样式 /
    .content {
      padding-top: 60px; / 预留顶部栏高度 /
      margin: 0 auto;
      max-width: 800px;
    }
  </style>
</head>
<body>
  <div class="header">固定顶部栏（导航栏）</div>
  <div class="content">
    <p>向下滚动查看顶部栏隐藏效果 →</p>
    <!-模拟长内容 -->
    <div style="height: 2000px; background: #f5f5f5;">
      <h2>内容区域</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
  </div>
  <script src="path/to/headroom.js"></script>
  <script>
    // 初始化 Headroom
    const header = document.querySelector('.header');
    const headroom = new Headroom(header, {
      // 配置选项（可选）
      "offset": 50,       // 顶部栏距离视口顶部的偏移量（像素）
      "tolerance": 5,     // 滚动判定的容差值（像素）
      "classes": {        // 自定义 CSS 类名
        "initial": "headroom--initial",
        "pinned": "headroom--pinned",
        "unpinned": "headroom--unpinned"
      }
    });
    headroom.init();
  </script>
</body>
</html>

关键配置参数说明

参数名 类型 默认值 作用描述
offset Number 0 顶部栏与视口顶部的距离阈值，达到此值时触发隐藏
tolerance Number 0 滚动判定的缓冲范围（防止频繁触发）
classes Object 自定义添加/移除的 CSS 类名（用于样式控制）
onPin Function 顶部栏固定时的回调函数
onUnpin Function 顶部栏隐藏时的回调函数

动态效果演示

假设页面初始状态如下：

  • 未滚动时：顶部栏固定显示。
  • 向下滚动超过 offset：顶部栏隐藏。
  • 向上滚动超过 tolerance：顶部栏重新显示。

代码逻辑流程图
| 用户操作 | 触发条件 | 顶部栏状态 |
|——————-|————————-|————|
| 向下滚动 | scrollY > offset | 隐藏 |
| 向上滚动 | scrollY < offset | 显示 |
| 快速滑动 | scrollY 变化 < tolerance | 保持原状态 |

进阶功能扩展

手动控制显示/隐藏

// 绑定按钮点击事件
document.getElementById('toggle-header').addEventListener('click', () => {
  headroom.lastKnownScrollY = 0; // 重置滚动位置
  headroom.debouncer({ scroll: { y: 0 } }); // 强制触发显示逻辑
});

兼容动态加载（如无限滚动）时，需手动调用 headroom.updateScroller() 更新滚动容器。

常见问题与解决方案

FAQs

问题 1：顶部栏初始状态未隐藏，如何设置默认隐藏？
解答：通过调整 offset 参数或添加自定义 CSS 类控制。 

new Headroom(header, { offset: -1 }); // 负值使初始状态隐藏

或直接在 CSS 中设置： 

.header {
  display: none; / 默认隐藏 /
}
.headroom--pinned .header {
  display: block; / 仅在 pinned 状态显示 /
}

问题 2：滚动时顶部栏抖动（频繁显隐）怎么办？
解答：增大 tolerance 值以减少敏感度。 

new Headroom(header, { tolerance: 10 }); // 扩大缓冲范围

或优化 offset 值,确保与顶部栏高度匹配。

完整代码整合（带注释）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">Headroom.js 完整示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/headroom@1.0.3/dist/headroom.css">
  <style>
    .header {
      background: #343a40;
      color: #fff;
      padding: 15px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      transition: transform 0.3s ease; / 添加过渡动画 /
    }
    .content {
      padding-top: 60px; / 匹配顶部栏高度 /
      padding-bottom: 50px;
    }
    / 自定义隐藏时的样式 /
    .headroom--unpinned .header {
      transform: translateY(-100%); / 完全隐藏 /
    }
  </style>
</head>
<body>
  <div class="header">我的网站导航栏</div>
  <div class="content">
    <h1>Headroom.js 实战教程</h1>
    <p>向下滚动查看顶部栏隐藏效果 →</p>
    <div style="height: 3000px; background: #eee;">
      <h2>模拟长内容</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/headroom@1.0.3/dist/headroom.js"></script>
  <script>
    // 选择顶部栏元素
    const header = document.querySelector('.header');
    // 初始化 Headroom（带配置）
    const headroom = new Headroom(header, {
      offset: 80,          // 滚动超过80px时隐藏
      tolerance: 15,       // 滚动判定缓冲15px
      classes: {          // 自定义类名（可选）
        initial: 'headroom-initial',
        pinned: 'headroom-pinned',
        unpinned: 'headroom-unpinned'
      }
    });
    // 启动 Headroom
    headroom.init();
  </script>
0

相关文章