妙用CSS创造吸睛页面：滚动时元素自动变小带你玩转“粘滞效果”！

前端

2023-07-14 19:25:55

让你的网站更吸睛！解锁滚动粘滞效果的魅力

在当今竞争激烈的网络世界中，打造一个引人入胜、用户友好的网站至关重要。而实现滚动粘滞效果正是提升网站视觉冲击力和用户体验的利器之一。

什么是滚动粘滞效果？

想象一下，当用户向下滚动网页时，一个元素（通常是头部或导航栏）会随着页面上升并固定在屏幕顶部。这就是滚动粘滞效果。它就像一块胶水，将元素粘在屏幕上，即使用户滚动页面，它也会始终可见。

为什么使用滚动粘滞效果？

滚动粘滞效果具有诸多好处：

改善导航： 当用户滚动浏览长篇内容时，粘滞导航栏可确保他们始终轻松访问重要链接，提升网站导航的便利性。
增强品牌知名度： 粘滞头部通常包含网站徽标和品牌元素，通过始终出现在用户视野中，可增强品牌知名度和记忆度。
提供即时访问： 将呼叫性用语按钮或重要信息固定在粘滞元素中，方便用户在需要时立即访问。
提升美观度： 滚动粘滞效果能增添网站的动态性和趣味性，为用户带来更具吸引力和身临其境的浏览体验。

如何实现滚动粘滞效果？

实现滚动粘滞效果有多种方法，但最常见和最简单的方法是使用CSS。

CSS实现示例：

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: top 0.3s ease-in-out;
}

.sticky.scrolled {
  top: -100px;
}

在这个示例中，.sticky类为要固定在屏幕顶部的元素指定样式。当页面向下滚动超过指定高度时，.sticky.scrolled类将应用于此元素，使其向上移动100像素并粘在屏幕顶部。

JavaScript实现：

JavaScript提供了更灵活的粘滞效果实现方式，允许进行更复杂的动画和条件触发。

示例代码：

const stickyElement = document.querySelector(".sticky");

window.addEventListener("scroll", () => {
  if (window.pageYOffset > 100) {
    stickyElement.classList.add("scrolled");
  } else {
    stickyElement.classList.remove("scrolled");
  }
});