javascript - 当网站顶部为 "stick"时，如何将页脚 "near"置于底部？

Question

我在网站加载后就开始工作了。页脚在底部。然后，当您滚动到内容时，它会滚动到顶部。然后当它到达顶部时，它会将(持久性标题)粘在顶部以进行站点导航。这一切都有效。

问题是，当我滚动回到顶部时，我希望页脚再次“粘”到底部。现在它最终会出现在浏览器底部的上方或下方，具体取决于显示器。

我已经通读了为类似主题提供的答案，它们解决了页脚粘在底部的问题，我需要的是一旦用户向后滚动到网站顶部附近，它就会“粘”回底部。

有人可以帮我完成这个吗？

这是测试站点的位置，只需滚动即可显示我的问题。

http://jsfiddle.net/billy_comic/AQrsf/

     $(function(){
     var stickyRibbonTop = $('#main-nav').offset().top;

     $(window).scroll(function(){
            if( $(window).scrollTop() > stickyRibbonTop ) {
                    $('#main-nav').css({position: 'fixed', top: '0px'});
            } else {
                    $('#main-nav').css({position: 'static', top: '0px'});
            }
    });
    });

非常感谢任何帮助。

B

Answer 1

如果从假设用户的窗口高度不会改变开始，就可以确定页脚的最小 y 位置。

然后，当用户滚动到该位置上方时，您可以将页眉/页脚的位置从固定位置(在 y = 0)更改为绝对位置(在 y = window_height - header_footer_height).

在此基础上扩展，如果窗口高度发生变化，您也可以更新位置。