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

css / jquery滚动修复div问题

1 个答案: