CSS | 滚动填充顶部

在网页设计中，滚动填充顶部是一种常见的技术，当页面开始滚动时，顶部的背景图像或颜色将逐渐滑动并填充整个顶部。这种技术可以增强用户体验，使页面看起来更具有吸引力。

下面是如何使用CSS实现滚动填充顶部的方法：

首先，我们需要创建一个包含顶部背景的HTML元素，例如：

<div class="header">
  <h1>My Website</h1>
  <p>Welcome to my website!</p>
</div>

接下来，我们需要在CSS中为该元素添加样式。我们可以使用CSS中的 position: fixed 属性将元素固定在顶部，并使用 z-index 属性确保其始终位于页面顶部。然后，我们可以使用 width 和 height 属性设置元素的大小，使用 background 属性设置元素的背景图像或背景颜色。

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: #fff;
  z-index: 999;
  transition: background 0.5s ease-in-out;
}

在这个样式中，我们选择了一个白色的背景颜色和一个100像素的高度。我们还添加了一个过渡效果，以使背景逐渐滑动到顶部。

现在，我们需要使用JavaScript来监听页面滚动事件，并在滚动时动态更新顶部背景颜色。我们可以使用 window.scrollY 属性获取当前滚动位置，并根据需要更新颜色。

window.addEventListener('scroll', function() {
  var scrollPosition = window.scrollY;
  var header = document.querySelector('.header');
  var headerHeight = header.offsetHeight;
  var scrollTrigger = headerHeight - 50; // adjust as needed

  if (scrollPosition > scrollTrigger) {
    header.style.background = "#f00";
  } else {
    header.style.background = "#fff";
  }
});

在这个JavaScript代码片段中，我们监听 scroll 事件，并获取当前滚动位置和顶部元素的高度。我们还使用 scrollTrigger 变量来确定何时应该开始背景颜色的变化。在这个例子中，我们将其设置为元素高度减去50像素。如果当前滚动位置超过了 scrollTrigger，我们将背景颜色更改为红色，否则我们将其更改为白色。

最后，我们运行这段JavaScript代码就可以实现滚动填充顶部特效了。

以上是如何使用CSS来实现滚动填充顶部的方法。这种方法可以为网站添加一些有用的效果和交互性，提高用户体验，带来更好的视觉效果。