javascript - 滚动显示页脚

Question

我一直在尝试使用视差来隐藏和显示滚动页脚，但由于它以 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的方法？我在这里错过了一个技巧吗？感谢您的帮助

fiddle https://jsfiddle.net/7uv2fzvp/2/

Answer 1

是的，那是纯 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/