javascript - 在浏览器底部将 div 从 fixed 切换为 absolute

Question

我正在尝试在此内容的底部添加一个页脚，它不会覆盖内容而是将其向上移动。

我能看到它工作的唯一方法是，当浏览器位于底部时，删除左侧红色“#work”上的“固定”类。

js fiddle DEMO

已更新 js fiddle DEMO

HTML

<div id="header-block">
    Header-block, this sits here in the background
</div>

<div id="content">
    <div id="work">
        This content should be fixed when at the top
    </div>
    <div id="description">
        This content should scroll -
    </div>

</div><!-- end content -->

<div id="footer">
    This should appear at the bottom
</div>

CSS

body {
    margin: 0px;
    padding: 0px;
}
#header-block {
    background: green;
    width: 100%;
    position: fixed;
    z-index: 1;
    height: 300px;
    top: 0;
}
#content {
    margin-top: 300px;
    width: 100%;
    position: relative;
    z-index: 2;
}
#work {
    background: red;
    width: 50%;
    height: 100vh;
    float: left;
    position: absolute;
}
#description {
    background: blue;
    width: 50%;
    height: 1200px;
    float: right;
    font-size: 30px;
}
#footer {
    background: black;
    width: 100%;
    height: 100px;
    position: absolute;
    z-index: 3;
    bottom: 0;
}

Answer 1

如果我理解你的问题是正确的，这应该可以解决问题(尽管不幸的是它在很大程度上取决于 JavaScript)。

// Fix work column on scroll
contentStart = $("#content").offset().top ;
contentSize  = $("#content").height() ;

window.onscroll = function(){   
    if( window.XMLHttpRequest ) {
        var position=window.pageYOffset;

        // calculate the position of the footer and the actual seen window            
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $("#footer").offset().top;

         if ( position > 300 && !(docViewBottom >= elemTop)) {
             $('#work').css({'position':'fixed', 'top':'0', 'height':'100vh'});
          } else {
              // if the footer is visible on the screen
              if(docViewBottom >= elemTop) {
                 $('#work').css({ 'top': 0 - (docViewBottom - elemTop) }); // scroll the #main div relative to the footer       
              } else {
                  $('#work').css({'position':'relative', 'top': 'auto'}) ;
              }
         }

    }
}

有关计算的更多信息，也许这个问题关于 stackoverflow很有用。

编辑:Andrew Haining 在我的回答之间张贴了他的回答，也许试试他的链接，也许这是一个更好(更合适)的解决方案。不幸的是，当我在 JSFiddle 中测试你的代码时，我没有实现这个页面，我没有看到他的答案。

如果您想使用我的脚本，请确保您可以使用不同的分辨率对其进行测试。它适用于我在 JSFiddle 中的解决方案，我没有测试任何其他的。