Javascript css/jquery滚动修复了div问题

当窗口的浏览器向下滚动时，我试图在某个像素后修复一个div，当窗口向上滚动时，将div放在开始时的相同位置

$(window).scroll(function () {
    var button = $('.button-mobile');
    offset = button.offset().top;
    position = button.position().top;
    console.log(position);
    if ($(this).scrollTop() >= offset) {
        $('.button-mobile').css({
            "max-height": "100%",
            "position": "fixed",
            "overflow-y": "auto",
            "top": "40px",
            "z-index": "1"
        });
    } else {
        $('.button-mobile').css({
            "position": "absolute",
            "top": "none",
            "overflow-y": "none",
            "z-index": "none"
        });
    }
});

if

分支运行良好。 我认为，

else

分支是问题所在

这一分支是对先例实验的检验

else

branch以px为单位使用已知高度，但不使用频繁变化的偏移量

我也不知道为什么当窗口向下滚动到div时，位置的最大值被设置为40px

---

谢谢

我想您应该将按钮和偏移量分配移出滚动回调：

    var button = $('.button-mobile');
    var offset = button.offset().top;

    $(window).scroll(function () {
        position = button.position().top;
        console.log(position);
        if ($(this).scrollTop() >= offset) {
            $('.button-mobile').css({
                "max-height": "100%",
                "position": "fixed",
                "overflow-y": "auto",
                "top": "40px",
                "z-index": "1"
            });
        } else {
            $('.button-mobile').css({
                "position": "static",
                "top": "none",
                "overflow-y": "none",
                "z-index": "none"
            });
        }
    });

---

我想您应该将按钮和偏移量分配移出滚动回调：

    var button = $('.button-mobile');
    var offset = button.offset().top;

    $(window).scroll(function () {
        position = button.position().top;
        console.log(position);
        if ($(this).scrollTop() >= offset) {
            $('.button-mobile').css({
                "max-height": "100%",
                "position": "fixed",
                "overflow-y": "auto",
                "top": "40px",
                "z-index": "1"
            });
        } else {
            $('.button-mobile').css({
                "position": "static",
                "top": "none",
                "overflow-y": "none",
                "z-index": "none"
            });
        }
    });

---

谢谢Dmitry，现在我很乐意帮忙。顺便说一下，你可以用回调函数中的按钮替换$（'.button mobile'），以避免滚动时不必要的DOM搜索。谢谢Dmitry，现在我很乐意帮忙。顺便说一下，你可以替换$（'.button mobile'））在回调函数中带有按钮，以避免滚动时不必要的DOM搜索。