javascript - 无法让固定 div 停在页脚上方，我错过了什么？

Question

我有一个侧栏 div，它固定到一定的滚动/页面高度，然后变为 position:absolute。

我的问题是，当它加载时，它位于正确的位置和高度，直到我滚动然后它移动(部分由于 jQuery 函数)。然而，当它移动时，它不会停在页脚处，而是继续越过它。

我正在 COS 上构建它，因此我无法在 JSFiddle 中准确地重现问题，但我可以将您链接到该页面。

CSS

/*fixed/absolute div*/
.widget-type-post_listing{
    right:0;
    width:50px;
    position:absolute;
    display;block;
    background:yellow;
    height:50px;
   }

jQuery

$(function(){
    var container = $('.widget-type-post_listing');
    var minTop = $('.header-container-wrapper').outerHeight();
    var maxTop = $('.footer-container-wrapper').offset().top - container.outerHeight(); 

    $(document).scroll(function() {
        container.css('top', Math.min( Math.max(minTop, $(document).scrollTop()), maxTop ));
    });
});

这是 JS Fiddle，显示了一个工作示例: JSFiddle 。您可以看到黄色框(fixed/abso.div)将停留在页面上，直到滚动到页脚。

正如我上面所说，要查看确切的问题，请访问工作页面: Working Page

感谢大家的帮助!

Answer 1

您可以在页脚和页眉之间添加一个 div，围绕黄色 div 100% 宽度位置相对位置，然后修复该 div 的最大高度并将其显示设置为 inline-flex 或 inline-block。我认为这份工作应该如此。

Cover-div{
width: 100%;
display: inline-flex;
position: relative;
}