jquery - 如何在页面底部停止浮动菜单

Question

我使用这个脚本：

<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）。

希望我让自己明白。

最好的祝福！

Answer 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().

让我知道你是否做到了。