移动 div 与窗口滚动不一致答案

【问题标题】：Move div with window scroll not consistent移动 div 与窗口滚动不一致
【发布时间】：2014-10-03 00:28:41
【问题描述】：

我需要侧边栏随窗口上下滚动，但在 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()));
    }
});

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

【问题讨论】：

您需要将其设为position: absolute;，然后监听滚动事件，每次更改时，您都需要将位置调整为窗口顶部边缘所在的位置。（实际上它更复杂，因为您需要让它在它们向后滚动时从边缘向下移动）

标签： javascript jquery html css

【解决方案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);
    }
});

【讨论】：