我一直在尝试使用视差来隐藏和显示滚动页脚,但由于它以 img 为目标,所以这不起作用。
我写了这篇文章,但它只是弹出,而不是主要内容页面向上滑动以慢慢显示页脚。
脚本
$(window).on('scroll', function() {
if ($(window).scrollTop() > 85) {
$('.footer').show();
} else {
$('.footer').hide();
}
});
这里有一个例子:http://red-team-design.com/simple-and-effective-dropdown-login-box/
滚动到底部可以看到页脚滑出。
有没有纯CSS的方法?我在这里错过了一个技巧吗? 感谢您的帮助
最佳答案
是的,那是纯 CSS。
只需要将 position: fixed
和 z-index: 0
放在一起,就像:
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
以及主要内容position: relative
和z-index: 1
.main-content {
position: relative;
z-index: 1;
}
这是 jsFiddle:https://jsfiddle.net/7uv2fzvp/11/
关于javascript - 滚动显示页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39434168/