頭變成固定的，當用戶滾動

Question

在一個web應用程序，我有一個頭，並希望使中繼續顯示其作爲用戶滾動，我以前position: fixed;來實現這一點，但身體現在從頁面的頂部，開始反對從標題下面開始。

原：

現在：

我想要做的就是給頭部固定的位置，當用戶開始滾動或給它一個固定位置，但根據頭部的高度保持標題下的那個區域（我目前可以只添加具有固定的高度一個div在那裏，但如果T他頭的變化，這意味着我必須改變，以及和感覺就像一個翻倍）

小提琴：https://jsfiddle.net/zmp7fbrx/3/

Answer 1

你可以用柔性佈局做到這一點，那麼.header可以不管的高度，並在頁面的其餘部分將自動適應。

套裝body作爲柔性父母，並在新的元素包裹.body和.footer和元素設置爲flex-grow: 1和overflow: scroll，這樣它會填滿窗口的其餘部分，而這個元素將溢出滾動，並.header會保持放置（模仿position: fixed）。

body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
    margin: 0; 
 
} 
 
.header { 
 
    background: black; 
 
    color: white; 
 
} 
 
.body { 
 
    min-height: 200vh; /* you can remove. just for demo purposes */ 
 
    flex-grow: 1; 
 
} 
 
main { 
 
    overflow-y: scroll; 
 
}

<div class="header">My menu</div> 
 
<main> 
 
    <div class="body">body</div> 
 
    <div class="footer">footer</div> 
 
</main>

Answer 2

你可以只設置bodypadding-top到頭部的高度，並添加top: 0到頭部的CSS。

body { 
 
    padding-top: 50px; 
 
} 
 

 
.header{ 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
.header, .body, .footer { 
 
    width:100%; 
 
    height:200px; 
 
    border:1px solid blue; 
 
} 
 

 
.header {height: 50px;} 
 
.body {text-align:center;} 
 
.footer {} 
 

 
.center-horiz{width:200px;height:100px;border:1px solid #666; display: inline-block;}

<div class="header">My menu</div> 
 
<div class="body">some text2 
 
    <br> 
 
    <div class="center-horiz">div centered horizontally</div> 
 
</div> 
 
<div class="footer">some text3</div>

或者你可以給.body頭的高度的margin-top。

.header{ 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
.header, .body, .footer { 
 
    width:100%; 
 
    height:200px; 
 
    border:1px solid blue; 
 
} 
 

 
.header {height: 50px;} 
 
.body { 
 
    margin-top: 50px; 
 
} 
 
.body {text-align:center;} 
 
.footer {} 
 

 
.center-horiz{width:200px;height:100px;border:1px solid #666; display: inline-block;}

<div class="header">My menu</div> 
 
<div class="body">some text2 
 
    <br> 
 
    <div class="center-horiz">div centered horizontally</div> 
 
</div> 
 
<div class="footer">some text3</div>

使用JavaScript得到DOM頭高度加載並設置.body元素的margin-top。 （這也適用於頭部的動態高度）

document.addEventListener('DOMContentLoaded', function(e) { 
 
    var headerElement = document.querySelector('.header'); 
 
    var bodyElement = document.querySelector('.body'); 
 
    
 
    bodyElement.style.marginTop = headerElement.getBoundingClientRect().height + 'px'; 
 
})

.header{ 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
.header, .body, .footer { 
 
    width:100%; 
 
    height:200px; 
 
    border:1px solid blue; 
 
} 
 

 
.header {height: 50px;} 
 
.body {text-align:center;} 
 
.footer {} 
 

 
.center-horiz{width:200px;height:100px;border:1px solid #666; display: inline-block;}

<div class="header">My menu</div> 
 
<div class="body">some text2 
 
    <br> 
 
    <div class="center-horiz">div centered horizontally</div> 
 
</div> 
 
<div class="footer">some text3</div>

注：如果頭的和動態的高度上的窗口大小調整變化，你必須添加一個 resize監聽器，設置在調整大小保證金。