固定頁腳自動向外擴展？

我想要使用這種視差效果http://jsfiddle.net/KsdeX/1/light/ 但唯一的問題是當使用最小高度而不是固定高度時，根據頁腳內容，頁腳展開內部。固定頁腳自動向外擴展？

下面是與自動調整大小的例子
http://jsfiddle.net/KsdeX/62/

那麼，有沒有辦法來推動或者使固定頁腳汽車之外，沒有展開下面的主體內容？

HTML

<div class="wrapper-parallax"> 
    <header> 
     <h1>Header</h1> 
    </header> 

    <div class="content"> 
     <h1>Content</h1> 
    </div> 

    <footer> 
     <h1>Footer</h1> 
    </footer> 
</div>

CSS

body { 
    margin: 0; 
} 
header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: -1; 
    height: 100px; 
    background: cyan; 
} 

.content { 
    position: relative; 
    z-index: 1; 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
    background: white; 
    min-height: 500px; 
} 
wrapper-parallax { 
    margin-top: 100px; 
    margin-bottom: 60px; 
} 
footer { 
    width: 100%; 
    position: fixed; 
    z-index: -1; 
    bottom: 0; 
    background: green; 
    height: 60px; 
}

來源

2014-04-02 Eddi

你明白它是如何工作的？ 'position：fixed'，'bottom：0'將把元素完全從文檔流中取出，並將其附加到屏幕的底部。你能夠看到頁眉或頁腳的唯一原因是因爲你的邊緣位置，這就等於這些元素的確切高度。改變高度或者不預期這個並且改變包裝的邊緣將會導致多餘的高度被遮蓋。由於這些元素不在文檔流中，因此不能動態影響其他元素。 – John

^這是一條評論，而不是一個答案，因爲我沒有解決方案，但我建議你可以做一些腳本計算來動態修改高度。重建/重新思考它的結構可能是一個更好的選擇（以避免腳本），但沒有什麼明顯的跳出來對我。 – John

這可以對你有用：[教程]（http://code.tutsplus.com/tutorials/simple-parallax-scrolling-technique--net-27641） – brobken

你可以使用jQuery來計算你的footer的高度時，頁面加載，然後用.css()分配一個值的.wrapper-parallax的margin-bottom。

$(document).ready(function() { 
    var footerHeight = $('footer').height(); 
    $('.wrapper-parallax').css('margin-bottom', footerHeight); 
});

http://jsfiddle.net/johntobinme/KsdeX/63/

來源

2014-04-02 10:26:05 John

謝謝，我現在試試。 – Eddi

真棒。它的工作原理，非常感謝您的幫助。 – Eddi

太好了，不客氣。 – John

固定頁腳自動向外擴展？

回答

相關問題