在浏览器底部将div从fixed切换到absolute

问题描述

我想在此内容的底部添加页脚，但不会覆盖内容，但会将其移动。

我可以看到它的工作方式会是什么样的，当浏览器在底部删除'固定'类上左红色'#work'。

更新了

HTML

 < div id =header-block> 
标题块，这在这里在后台
< / div> 
 
< div id =content> 
< div id =work> 
此内容应在顶部固定
< / div> 
< div id =describe> 
此内容应滚动 -  
< / div> 
 
< / div><！ -  end content  - > 
 
< div id =footer> 
这应该出现在底部
< / 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; 
} 
  

解决方案

，

  //在滚动上修正工作栏
 contentStart = $（＃content）。offset（）。top; 
 contentSize = $（＃content）。height（）; 
 
 window.onscroll = function（）{
 if（window.XMLHttpRequest）{
 var position = window.pageYOffset; 
 
 //计算页脚位置和实际看到的窗口
 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（docViewBottom> = elemTop）{
 $（'＃work'）。css top'：0  - （docViewBottom  -  elemTop）}）; //滚动相对于页脚的#main div 
} else {
 $（'＃work'）。css（{'position'：'relative'，'top'：'auto'}） ; 
} 
} 
 
} 
} 
  

有关计算的其他信息，可能是关于 stackoverflow

。Andrew Haining在我的回答之间张贴了他的回答，也许是他的链接尝试，也许它更好（更适当）解决方案。不幸的是，我没有实现这个页面，当我在JSFiddle测试你的代码，我没有看到他的回答。

如果你想使用我的脚本，你可以用不同的分辨率测试它。它工作正常为我的解决方案在JSFiddle，我没有测试任何其他。

Im trying to add a footer at the bottom of this content that doesn't overlay the content but moves it up.

The only way I can see it working would be something like, when browser is at the bottom remove 'fixed' class on the left red '#work'.

js fiddle DEMO

Updated 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;
}

解决方案

If I understand your question correct, this should do the trick (although it depends very much on JavaScript unfortunately).

// 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'}) ;
              }
         }

    }
}

For further informations about the calculations, perhaps this question on stackoverflow is useful.

Edit: Andrew Haining posted his answer in between of my answer, perhaps give his link a try and maybe it's a better (more proper) solution. Unfortunately I haven't actualised this page when I was testing your code in JSFiddle and I didn't see his answer.

If you want to use my script, make sure you can test it with different resolutions. It works just fine for my resolution in JSFiddle, I didn't test any other.

这篇关于在浏览器底部将div从fixed切换到absolute的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！