在浏览器底部将div从固定切换为绝对

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中的解析,我没有测试任何其他.