開關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中的解決方案中工作得很好，我沒有測試任何其他的。

Answer 2

我不是100％肯定，你想要什麼，但如果你刪除position: absolute和來自foo的bottom: 0 ter，並在頁腳上方放上一個class='clearboth'的div，它似乎可以滿足您的需求。

CSS

.clearboth { 
    clear: both; 
} 

---

這是什麼，我看到你擺弄的圖。

你要紅色和藍色永遠是觸摸黑？

我沒有看到紅色覆黑色

Answer 3

你應該使用jQuery添加包含position:fixed值上課的時候頁面的滾動位置小於#work div的線位置。一旦它滾動過去的位置，刪除類，並讓元素回落。

您可以使用以下jQuery方法實現此目的。.scrollTop().offset().top()和$(window).height()。

This tutorial會給你的，你需要做什麼來實現必要的結果是什麼有所瞭解，你將只需要稍微改變使用$(window).height()，$('#footer').height()和其他一些改變，讓你的願望的計算。

Answer 4

根據你問的問題，我認爲這是你的意思。紅色div應該在到達頂部時被固定，但在滾動的頂部下方時應該是絕對的，而在滾動時紅色的footer應該低於紅色，請檢查我爲您完成的代碼。只需添加這個jQuery腳本並運行它。

<script type="text/javascript" src="js/jquery.js"></script> 
<script> 
$(document).ready(function() { 
     $(window).scroll(function() { 

       console.log($(window).scrollTop()); 

       if ($(window).scrollTop() >= 322) { 

        $('#footer').css("z-index","1"); 
        $('#work').css(
        { 
         "background": "red", 
         "width": '50%', 
         'height': '100vh', 
         'float': 'left', 
         'position': 'fixed', 
         'top': '0' 
        }); 
       } 

       if ($(window).scrollTop() <= 322) 
       { 
        $('#work').css(
        { 
         "background": "red", 
          "width": "50%", 
          "height": "100vh", 
          "float": "left", 
          "position": "absolute" 
        }); 
       }; 



     }); 

}); 
</script> 

Answer 5

如果不完全的視差，這是有點接近如何視差作品，集裝箱的移動速度不同，有的容器坐在固定的或當他們達到一個特定的上/下視口中偏移滾動。

有插件可以做到這一點。 Skrollr

您可以使用Skrollr和skrollrcss，它將確保容器如何根據窗口和容器的特定位置在屏幕上的位置。