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()。

如果你这样做，请告诉我。

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

1 个答案: