javascript - div 定位固定在 margin-top :20px when scrolling up

Question

我有一个 div，当您向上滚动时，我希望将其固定在距窗口顶部 20px 的位置，当您到达底部时，将其固定在距页脚 40px 的位置。我的代码似乎不稳定，一定有更好的方法吗？ Page Link

$(document).scroll(function () {
        if($(window).scrollTop() >= 345){
            $('#rightShipping').css({'position' : 'fixed', 'top' : '0px'});
        }
        if($(window).scrollTop() <= 346){
            $('#rightShipping').css({'position' : '', 'top' : ''});
        }
        console.log($(window).scrollTop());
    });

Answer 1

一个简单的想法 - 我会删除 .rightCol block ，只留下 #rightShipping 一个 top: 20px 及其父级position:relative。然后使用这段代码:

$(document).scroll(function () {

    var scrollTop = $(window).scrollTop();

    var offsetTop = $('#rightShipping').offset().top;
    var positionTop = $('#rightShipping').position().top;

    if (scrollTop >= offsetTop - positionTop) {
        $('#rightShipping').css('position', 'fixed');
    } else {
        $('#rightShipping').css('position' : 'relative');
    }
});

我真的不知道这是否有效，因为我还没有测试过，而且我需要睡一会儿，但我希望它有帮助。

祝你好运!