滚动吸顶，优雅地粘住顶部

2023-11-20 21:11:52

最近在项目中遇到了一个需求，需要实现滚动吸顶，即当页面滚动到一定位置时，页面顶部固定住一个元素，不再随页面滚动而滚动。这个需求看似简单，但如果要兼容各种设备和浏览器，并且考虑响应式设计，就需要一些技巧。

本文将介绍一种使用 CSS 和 JavaScript 实现滚动吸顶的方法，这种方法简单易用，并且兼容各种设备和浏览器。

HTML 结构

首先，我们需要创建一个需要固定元素的 HTML 结构。这里我们使用了一个容器 div 来包含需要固定元素：

<div id="container">
  <div id="header">这是需要固定在顶部的元素</div>
  <div id="content">这是页面内容</div>
</div>

CSS 样式

接下来，我们需要使用 CSS 来设置容器 div 的样式，以及需要固定元素的样式。

#container {
  position: relative;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
}

在上面的 CSS 中，我们设置了容器 div 的 position 为 relative，这样可以使内部元素相对于容器 div 定位。然后，我们设置了 header 元素的 position 为 fixed，并设置了 top、left、width 和 height 属性。

JavaScript 代码

最后，我们需要使用 JavaScript 来监听容器 div 的滚动事件，当滚动到对应高度时，使用 CSS fixed 属性将 header 元素固定在顶部。

window.addEventListener('scroll', function() {
  var scrollTop = document.documentElement.scrollTop;
  var headerHeight = document.getElementById('header').offsetHeight;

  if (scrollTop > headerHeight) {
    document.getElementById('header').classList.add('fixed');
  } else {
    document.getElementById('header').classList.remove('fixed');
  }
});

在上面的 JavaScript 代码中，我们监听了窗口的滚动事件，并获取了滚动距离。然后，我们获取了 header 元素的高度。当滚动距离大于 header 元素的高度时，我们为 header 元素添加 fixed 类，这样 header 元素就会固定在顶部。当滚动距离小于 header 元素的高度时，我们移除 fixed 类，这样 header 元素就会恢复正常滚动。