如何在页面底部停止浮动菜单答案

【问题标题】：How to stop floating menu at bottom of page如何在页面底部停止浮动菜单
【发布时间】：2012-09-25 12:21:59
【问题描述】：

我正在使用这个脚本：

<script>
    $(function() {
        var offset = $("#menu_border").offset();
        var topPadding = 20;
        $(window).scroll(function() {
            if ($(window).scrollTop() > offset.top) {
                $("#menu_border").stop().animate({
                    marginTop: $(window).scrollTop() - offset.top + topPadding
                });
            } else {
                $("#menu_border").stop().animate({
                    marginTop: 0
                });
            };
        });
    });
    </script>

当用户滚动时，它使我的 $menu_border 跟随窗口。问题是，我在这个“下面”有一个 div，当用户（屏幕分辨率低于 1080）滚动到页面底部时，这个脚本只是继续向下推 #menu_border，使页面更长并且更长。

所以问题是；有没有简单的方法让它停在某个点？最好的东西是在容器内（在这种情况下为#container_div）。

希望我能理解自己。

最好的问候！

【问题讨论】：

如果您总是希望 menu_border 相对于浏览器窗口位于同一位置，为什么不将 position:fixed 添加到 css 中？
因为我想让它在顶部和底部滑动到合适的位置，这在固定的情况下是不可能的。还是谢谢

标签： jquery html menu scroll jquery-animate

【解决方案1】：

当$(window).scrollTop() 的矩值加上#menu_border 的高度超过正文的高度时，您需要停止添加到边距。

这是我的头等大事，我没有现场尝试，但将您的第一个条件更改为：

if ($(window).scrollTop() > offset.top && 
    ($(window).scrollTop() + $('#menu_border').outerHeight() <=  $('BODY').height()) {

而不是

if ($(window).scrollTop() > offset.top)

应该可以解决问题。根据您是否在#menu_border 上有填充，您可能想要使用$('BODY').outerHeigh() 而不是$('BODY').height()。

如果你做到了，请告诉我。

【讨论】：