Question

我需要我的侧边栏向上和向下滚动窗口，但当div位于顶部或底部时停止。下面的代码在页面首次加载和向下滚动或页面缓慢向上滚动时起作用，但当页面滚动到侧边栏div的最底部时，页面必须到达顶部（然后是一些）为了触发保证金变动。

除了滚动之外还有其他一些我应该寻找的触发器吗？如何调整此代码以正确调整div？

$(window).on("load scroll", function() {
    var scrollYpos = $(document).scrollTop();
    var sidebarinfo = $("#sidebar").offset().top + $("#sidebar").height();
    var windowinfo = $(window).height() + $(window).scrollTop();
    if ((windowinfo)<(sidebarinfo)){
        $('#sidebar').css('margin-top', -scrollYpos);
    }
});

侧边栏div是固定位置。如果我使用绝对位置，div会滚动很好，但是当div的底部到达时它不会停止 - 它只是继续滚动窗口。

我已用此代码修复了问题的主要部分。

$(window).on("load scroll", function() {
    var sidebarinfo = $("#sidebar").scrollTop() + $("#sidebar").height();
    var windowinfo = $(window).innerHeight() + $(window).scrollTop();
    if ((windowinfo)<(sidebarinfo)){
        $('#sidebar').css('top', -($(window).scrollTop()));
    }
});

唯一的问题是页面加载，侧边栏卡在错误的位置，直到它一直向上滚动（以及更多）。

Answer 1

我实际上发现我需要调整一些内容并添加一个else子句：

$(window).on("scroll", function() {
    var scrollmargin = $(window).scrollTop() - $("#sidebar").outerHeight();
    var sidebarinfo = $("#sidebar").scrollTop() + $("#sidebar").outerHeight();
    var windowinfo = $(window).innerHeight() + $(window).scrollTop();
    console.log($(window).scrollTop());
    if ((windowinfo)<(sidebarinfo)){
        $('#sidebar').css('top', (sidebarinfo + scrollmargin)*-1);
    }
    else {
        var margintop = $(window).innerHeight() - $("#sidebar").outerHeight();
        $('#sidebar').css('top', margintop);
    }
});

移动div与窗口滚动不一致

1 个答案: