目录
在网站设计中，滚动效果是常见的特效之一。而实现“粘滞效果”（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超过下一区域的偏移量减去导航栏高度时，我们就认为已经滚动到下一区域了。此时，我们重新计算导航栏的高度和最大高度，以实现元素高度自动缩小的效果。如果还没有滚动到下一区域，那么我们就将导航栏固定在页面顶部。
注意事项
- 在计算下一个区域的偏移量和最大高度时，要考虑页面滚动的高度scrollTop。因此，在实际应用中，我们需要将nextOffset和maxHeight的值计算到scrollTop之内。
- 在实际应用中，要考虑不同设备的窗口大小和分辨率。在这种情况下，我们可能需要动态地调整元素的高度和最大高度。
总结
粘滞效果是网页设计中常见的特效之一。使用CSS实现滚动高度自动变小的粘滞效果，可以让页面更吸引人。在这篇文章中，我们介绍了如何使用JavaScript监听窗口滚动事件，并根据滚动高度和下一个区域的高度来控制导航栏的表现方式。希望这篇文章能够帮助你实现粘滞效果。
