javascript - css/jquery 滚动固定 div 问题

Question

我试图在窗口浏览器向下滚动时修复特定像素后的 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 分支适用于已知高度(以 px 为单位)，但不适用于频繁更改的偏移量。

另外我不知道为什么当窗口向下滚动到 div 时位置的顶部值设置为 40px。

谢谢

Answer 1

我想你应该将按钮和偏移分配移出滚动回调:

    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"
            });
        }
    });