CSS实现滚动高度自动变小的粘滞效果。-五八三

在网站设计中，滚动效果是常见的特效之一。而实现“粘滞效果”（sticky effect）则可以让页面更吸引人。所谓“粘滞效果”，就是指当用户向下滚动页面时，一个元素会随着页面上升并保持在一定的位置

实现思路

我们要实现的效果是：当页面向下滚动时，一个元素（例如导航栏）会固定在页面顶部直到滚动到下一个区域，并且在滚动到下一个区域时，元素高度自动缩小为原来的一半以上。我们可以这样实现：

将元素设置为fixed，使其固定在页面顶部。
使用JavaScript获取下一个区域的高度（或预设一个高度值），并将其赋给元素的max-height属性。
监听窗口滚动事件，并在scroll事件触发时计算元素的top值和max-height值，以及页面滚动的高度scrollTop值。通过比较这些值，控制元素的表现方式。

实现步骤

1. HTML结构

首先，我们需要有一个包含导航栏和下一个区域的HTML结构。

<div class="header">Header</div>
<div class="content">Content</div>

2. CSS样式

接下来，我们为导航栏和内容区域设置基本样式。

body {
  margin: 0;
  padding: 0;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: white;
  text-align: center;
  height: 80px; /* 导航栏默认高度 */
  line-height: 80px; /* 垂直居中 */
  font-size: 24px;
  font-weight: bold;
}

.content {
  height: 2000px; /* 下一个区域的默认高度 */
}

这里我们设置导航栏的初始高度为80px，并将其固定在页面顶部。我们还为内容区域设置了默认高度为2000px，以便计算导航栏的max-height属性值。

3. JavaScript代码

接下来，我们需要使用JavaScript获取下一区域的高度，并在滚动时控制导航栏的表现方式。

首先，我们要获取下一区域的高度。我们可以使用document.querySelector()方法来获取下一个元素，然后使用offsetTop属性来获取它相对于父元素的垂直偏移量。代码示例如下：

const next = document.querySelector(".content");
const header = document.querySelector(".header");

const nextOffset = next.offsetTop;

然后，我们需要监听窗口滚动事件，并根据滚动高度scrollTop和下一区域的偏移量nextOffset来控制导航栏的表现方式。我们可以将这个逻辑封装为一个函数，并在scroll事件触发时调用它：

window.addEventListener("scroll", function() {
  stickyHeader();
});

function stickyHeader() {
  const scrollTop = window.pageYOffset;

  if (scrollTop >= nextOffset - header.clientHeight) {
    // 滚动到下一个区域，元素高度自动缩小
    const newHeight = header.clientHeight / 2;
    const maxHeight = nextOffset - scrollTop;
    header.style.maxHeight = `${maxHeight}px`;
    header.style.height = `${newHeight}px`;
  } else {
    // 固定在页面顶部
    header.style.maxHeight = "none";
    header.style.height = "80px";
  }
}

这个函数的逻辑是：当滚动高度scrollTop超过下一区域的偏移量减去导航栏高度时，我们就认为已经滚动到下一区域了。此时，我们重新计算导航栏的高度和最大高度，以实现元素高度自动缩小的效果。如果还没有滚动到下一区域，那么我们就将导航栏固定在页面顶部。