页面效果多样：多种滚动吸顶方式比较[升级版] [附Demo地址]

2024-01-20 21:31:33

前言

滚动吸顶是web页面中一种常见的效果，它可以使页面中的某个元素在页面滚动时始终保持在可视区域内。这在很多场景下都非常有用，比如固定导航栏、侧边栏、工具栏等。

目前市面上有很多种实现滚动吸顶效果的方法，每种方法都有其各自的优缺点和适用场景。在本文中，我们将对5种常用的滚动吸顶实现方式进行详细比较，包括固定吸顶、滚动条联动吸顶、跟随滚动吸顶、基于元素位置的吸顶和基于元素距离的吸顶。希望通过本文的介绍，能够帮助读者快速了解并掌握各种滚动吸顶效果的实现方法。

正文

1. 固定吸顶

固定吸顶是最简单的一种滚动吸顶实现方式，它将元素固定在页面顶部或底部，无论页面如何滚动，元素始终保持在可视区域内。

固定吸顶的实现方法也很简单，只需要在元素的CSS样式中添加position: fixed;属性即可。

.fixed-element {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

固定吸顶的优点在于实现简单，兼容性好，缺点在于无法实现跟随滚动效果，并且在页面较长时，固定吸顶元素可能会遮挡页面内容。

2. 滚动条联动吸顶

滚动条联动吸顶是另一种常见的滚动吸顶实现方式，它通过监听页面滚动条的滚动事件，来改变元素的定位。当页面滚动到一定位置时，元素会自动吸附到页面顶部或底部。

滚动条联动吸顶的实现方法也比较简单，只需要在页面滚动时，通过JavaScript代码改变元素的定位即可。

window.onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 100) {
    document.getElementById("myElement").classList.add("fixed-element");
  } else {
    document.getElementById("myElement").classList.remove("fixed-element");
  }
};

滚动条联动吸顶的优点在于可以实现跟随滚动效果，缺点在于兼容性较差，在某些浏览器中可能会出现问题。

3. 跟随滚动吸顶

跟随滚动吸顶是滚动条联动吸顶的升级版，它不仅可以实现跟随滚动效果，还可以实现平滑的过渡动画。

跟随滚动吸顶的实现方法与滚动条联动吸顶类似，只不过在改变元素定位时，需要使用CSS3的transition属性来实现平滑过渡。

.follow-scroll-element {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transition: top 0.5s ease-in-out;
}

window.onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 100) {
    document.getElementById("myElement").classList.add("follow-scroll-element");
  } else {
    document.getElementById("myElement").classList.remove("follow-scroll-element");
  }
};

跟随滚动吸顶的优点在于可以实现跟随滚动效果和平滑过渡动画，缺点在于兼容性较差，在某些浏览器中可能会出现问题。

4. 基于元素位置的吸顶

基于元素位置的吸顶是一种比较新颖的滚动吸顶实现方式，它通过监听页面中某个元素的位置，来改变另一个元素的定位。当元素滚动到一定位置时，另一个元素会自动吸附到页面顶部或底部。

基于元素位置的吸顶的实现方法比较复杂，需要使用JavaScript代码来监听元素的位置变化，并根据元素的位置来改变另一个元素的定位。

var element = document.getElementById("myElement");
element.addEventListener("scroll", function() {
  var scrollTop = element.scrollTop;
  if (scrollTop > 100) {
    document.getElementById("anotherElement").classList.add("fixed-element");
  } else {
    document.getElementById("anotherElement").classList.remove("fixed-element");
  }
});

基于元素位置的吸顶的优点在于可以实现跟随滚动效果和元素之间的关联性，缺点在于实现方法复杂，兼容性较差。

5. 基于元素距离的吸顶

基于元素距离的吸顶也是一种比较新颖的滚动吸顶实现方式，它通过监听页面中某个元素与另一个元素的距离，来改变元素的定位。当元素滚动到一定距离时，另一个元素会自动吸附到页面顶部或底部。

基于元素距离的吸顶的实现方法也比较复杂，需要使用JavaScript代码来监听元素与另一个元素的距离，并根据距离来改变元素的定位。

var element1 = document.getElementById("myElement1");
var element2 = document.getElementById("myElement2");
element1.addEventListener("scroll", function() {
  var distance = element1.scrollTop - element2.offsetTop;
  if (distance > 100) {
    element2.classList.add("fixed-element");
  } else {
    element2.classList.remove("fixed-element");
  }
});