如何创建随页面滚动动态改变样式的工具栏-js教程-PHP中文网

如何创建随页面滚动动态改变样式的工具栏

本文介绍如何通过监听 window 的 scroll 事件，结合 window.scrollY 实时响应滚动位置，并动态修改工具栏的 CSS 样式（如背景色、透明度或尺寸），解决常见 DOM 元素选择与事件绑定错误。

本文介绍如何通过监听 `window` 的 scroll 事件，结合 `window.scrolly` 实时响应滚动位置，并动态修改工具栏的 css 样式（如背景色、透明度或尺寸），解决常见 dom 元素选择与事件绑定错误。

实现一个“滚动自适应工具栏”的核心在于：正确监听滚动事件源、准确获取滚动偏移量、及时更新目标元素样式。原始代码存在多个关键问题：

❌ 错误监听 #evrth 的 scroll 事件：该
默认不可滚动（无 overflow 设置且内容未超出高度），因此 onscroll 永远不会触发；
❌ 误将 innerHTML 当作 DOM 元素使用：document.getElementById('container').innerHTML 返回字符串，无法调用 .classList.add()；
❌ 未设置初始状态或防抖机制，易导致性能问题。

✅ 正确做法是监听 window 对象的 scroll 事件——因为浏览器默认滚动发生在整个视口（window），而非某个普通 div。

以下是一个轻量、可扩展的实现方案：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

✅ 基础实现（渐变背景色）



  <style>
    body {
      margin: 0;
      height: 200vh; /* 提供足够滚动空间 */
      font-family: -apple-system, sans-serif;
    }
    .toolbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background: rgb(255, 255, 255);
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      transition: all 0.3s ease; /* 平滑过渡 */
      z-index: 1000;
    }
    .toolbar.scrolled {
      background: #2c3e50;
      color: white;
      box-shadow: 0 4px 16px rgba(0,0,0,0.16);
    }
  </style><div class="toolbar" id="toolbar">My Toolbar</div>
  <!-- 页面其他内容 -->
  <div style="padding-top: 80px; padding: 20px;">
    <h2>Scroll down to see the toolbar change!</h2>
    <p>...</p>
  </div>

  <script>
    const toolbar = document.getElementById('toolbar');
    const SCROLL_THRESHOLD = 60; // 像素：滚动超过此值即激活样式

    function updateToolbarStyle() {
      if (window.scrollY >= SCROLL_THRESHOLD) {
        toolbar.classList.add('scrolled');
      } else {
        toolbar.classList.remove('scrolled');
      }
    }

    // 使用 passive: true 提升滚动性能（尤其移动端）
    window.addEventListener('scroll', updateToolbarStyle, { passive: true });
    updateToolbarStyle(); // 初始化状态
  </script>

? 进阶技巧（平滑动态效果）

若需更精细控制（如颜色线性插值、透明度渐变），可复用数学映射函数：

// 将 scrollY 映射到 [0, 1] 区间（0~100px 滚动 → 0~1）
function getScrollRatio(maxScroll = 100) {
  return Math.min(window.scrollY / maxScroll, 1);
}

function onScroll() {
  const ratio = getScrollRatio(120);
  toolbar.style.backgroundColor = `rgba(44, 62, 80, ${ratio})`;
  toolbar.style.transform = `scale(${1 - ratio * 0.05})`; // 轻微缩放增强动感
}

window.addEventListener('scroll', onScroll, { passive: true });
onScroll();

⚠️ 注意事项

性能优先：务必使用 { passive: true }，避免因 preventDefault() 导致滚动卡顿；
兼容性兜底：IE 不支持 passive，但现代项目可忽略或通过 @supports 条件加载；
SEO 与可访问性：样式变更不应影响语义结构，确保工具栏始终为
或带 role="navigation"；
移动端适配：固定定位在 iOS Safari 中可能有渲染延迟，建议添加 will-change: transform 或启用硬件加速（如 transform: translateZ(0)）。

掌握这一模式后，你不仅能实现工具栏变色，还可延伸用于导航高亮、返回顶部按钮浮现、标题吸顶等交互场景——核心逻辑始终是：监听 window.scrollY → 计算状态 → 更新 DOM 样式。