css滚动隐藏页脚

在网页设计中，有时候我们希望页面底部的版权信息等内容在页面滚动到一定位置时不再显示，可以通过CSS实现。下面我们就来介绍一下如何使用CSS滚动隐藏页脚。

.footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #ccc;
padding: 10px 0;
transition: bottom 0.3s ease;
}
.footer.hidden {
bottom: -50px;
}

我们先给页脚添加一个 class 名称为 .footer，然后设置其 position 为 fixed，并将其置于页面底部，width 设置为 100%，background-color 设置为灰色，padding 设置为 10px 0。接着，我们为 .footer 添加一个过渡（transition），让其在改变 bottom 属性时有一个平滑的过渡效果。最后，我们再定义一个 .hidden 的 class，用于在滚动到一定位置时触发隐藏效果。

window.addEventListener('scroll', function() {
var footer = document.querySelector('.footer');
var threshold = document.body.offsetHeight - window.innerHeight - 100;
if (window.pageYOffset >threshold) {
footer.classList.add('hidden');
} else {
footer.classList.remove('hidden');
}
});

我们使用 JavaScript 监听滚动事件，当滚动到页面底部减去一定的距离时，就添加 .hidden 类名，从而触发隐藏效果。而当页面回到顶部时，我们就将 .hidden 类名移除，使页脚重新显示。

通过这种方式，我们可以轻松地实现在页面滚动到一定位置后自动隐藏页脚的效果。如果你在项目中也需要使用类似的滚动隐藏效果，可以参考上述代码，在实际应用场景中进行适当的调整，实现自己想要的效果。

查看更多关于css滚动隐藏页脚的详细内容...