CSS固定頁腳，浮動頭

我想建立一個頁面，CSS，這就像蘋果的頁面在這裏：http://www.apple.com/macbook-pro/CSS固定頁腳，浮動頭

這個頁面有相似但不優雅的東西，因爲它使用JavaScript： http://lifeinthegrid.com/simple-css-fixed-header/

我正在嘗試構建一個帶有小標題滾動頁面的頁面，但在此之下，導航欄會隨標題滾動，但只顯示在屏幕頂部，然後在內容滾動時停留在頂部。

我還需要一個頁腳，如果內容沒有填充到窗口的底部，它將保持固定在底部。

我的頁腳工作正常，但標題只是滾動。當我嘗試將position：fixed和top：0添加到我的標題或導航樣式中時，標題或導航條就會消失。我該如何做這項工作？

我現在的CSS看起來像：

html, body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 

#wrapper { 
    min-height:100%; 
    position:relative; 
} 

#header { 
    height:40px; 
    background-color:#333; 
} 

#headerbox { 
    width:1000px; 
    margin:auto; 
    padding-top:10px; 
} 

#navigation { 
    height:50px; 
    background-color:#eeeeee; 
    border-bottom:1px solid #dddddd; 
} 

#content { 
    padding-bottom:50px; /* Height of the footer element */ 
} 

#contentbox { 
    width:1000px; 
    margin:auto; 
    padding-top:20px; 
    padding-bottom:20px; 
} 

#footer { 
    height:50px; 
    position:absolute; 
    right:0; 
    bottom:0; 
    left:0; 
    width:100%; 
    background-color:#eeeeee; 
    border-top:1px solid #dddddd; 
} 

#footerbox { 
    width:1000px; 
    margin:auto; 
    padding-top:10px; 
}

來源

2015-09-25 Trygve

你可以讓jsfiddle更好地幫助你 –

蘋果頁面也使用js。 – gaynorvader

https://jsfiddle.net/11pa9o9d/ 有沒有一個例子，我可以看到這是否正確？ JS是好的，如果這是它的工作方式。 – Trygve

根據你的意見，你應該能夠做你想做的與下面的JavaScript（與jQuery library）

var flyout = $('#flyout'), 
 
    flyoutPosition = flyout.offset().top; 
 

 
$(window).scroll(function() { 
 
    if ($(this).scrollTop() > flyoutPosition) { 
 
     flyout.addClass('fixed'); 
 
    } else { 
 
     flyout.removeClass('fixed'); 
 
    } 
 
});

/* this is needed*/ 
 
.fixed { 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    z-index:2; 
 
    width:100%; 
 
} 
 

 
/* these are for the example */ 
 
body, html { 
 
    height:1000px; 
 
    position:relative; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#header { 
 
    height:75px; 
 
    background:green; 
 
} 
 
#flyout { 
 
    height:50px; 
 
    background-color:blue 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"></div> 
 
<div id="flyout"></div>

來源

2015-09-25 14:29:43 Pete

謝謝。這效果很好！ – Trygve

CSS固定頁腳，浮動頭

回答

相關問題