如何在滾動固定標題/導航欄上制作多個貼在頁面頂部的固定標題/導航欄？

Question

有誰知道如何在滾動固定標題上制作多個？ 我檢查答案，如本。

這是我想要的，但我希望該標題在另一個標題之前停止，並且當第一個標題滾動經過第二個標題時，應該占據第一個標題的位置並粘在屏幕的最頂部。 但它們對我不起作用，因為它們使用的是我不使用的庫（jQuery 等），而且它們過於復雜。 我試過這樣做，我讓它與只有 2 個標題的getBoundingClientRect()一起工作。 我在這里提供了 HTML&CSS 部分：

 html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Roboto', sans-serif; } @import url("https://fonts.googleapis.com/css?family=Roboto:100"); h1 { letter-spacing: 3px; margin: 0; padding-left: 10px; padding-top: 10px; color: #fff; font-weight: 100; } .header { width: 100%; height: 50px; } .header:nth-of-type(1){ background-color: dodgerblue; position: fixed; } .header:nth-of-type(2){ background-color: rebeccapurple; } .header:nth-of-type(3){ background-color: chartreuse; } .content { width: 100%; height: 100%; background: linear-gradient(70deg, orange, crimson); padding-top: 50px; }

 <header class="header"><h1>HEADER 1</h1></header> <div class="content"><h1>CONTENT</h1></div> <header class="header"><h1>HEADER 2</h1></header> <div class="content"><h1>CONTENT</h1></div> <header class="header"><h1>HEADER 3</h1></header> <div class="content"><h1>CONTENT</h1></div>

Answer 1

演示：

 html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Roboto', sans-serif; } @import url("https://fonts.googleapis.com/css?family=Roboto:100"); h1 { letter-spacing: 3px; margin: 0; padding-left: 10px; padding-top: 10px; color: #fff; font-weight: 100; } .content { width: 100%; height: 100%; background: linear-gradient(70deg, orange, crimson); } .content .header { width: 100%; height: 50px; position: sticky; top: 0; } .content:nth-of-type(1) .header { background-color: dodgerblue; } .content:nth-of-type(2) .header { background-color: rebeccapurple; } .content:nth-of-type(3) .header { background-color: chartreuse; }

 <div class="content"> <header class="header"> <h1>HEADER 1</h1> </header> <div class="content-inner"> <h1>CONTENT</h1> </div> </div> <div class="content"> <header class="header"> <h1>HEADER 2</h1> </header> <div class="content-inner"> <h1>CONTENT</h1> </div> </div> <div class="content"> <header class="header"> <h1>HEADER 3</h1> </header> .content <h1>CONTENT</h1> </div>

在 jsFiddle 上查看

解釋：

position: sticky正確的標記將完成工作

PS：我知道已經有一個使用position: sticky的答案，但在該解決方案中，前一個標題不會停止，而是與下一個重疊。 在我的解決方案中是在下一次粘貼之前停止。

Answer 2

如果沒有你的 javascript 代碼，我可以建議你使用position:sticky來實現你想要的。

在此處閱讀更多位置 CSS

它在現代瀏覽器中得到很好的支持caniuse position sticky

 html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Roboto', sans-serif; position:relative; } @import url("https://fonts.googleapis.com/css?family=Roboto:100"); h1 { letter-spacing: 3px; margin: 0; padding-left: 10px; padding-top: 10px; color: #fff; font-weight: 100; } .header { width: 100%; height: 50px; position: sticky; top: 0px; } .header:nth-of-type(1){ background-color: dodgerblue; } .header:nth-of-type(2){ background-color: rebeccapurple; } .header:nth-of-type(3){ background-color: chartreuse; } .content { width: 100vw; height: 100vh; background: linear-gradient(70deg, orange, crimson); padding-top: 50px; }

 <section> <header class="header"><h1>HEADER 1</h1></header> <div class="content"><h1>CONTENT</h1></div> <header class="header"><h1>HEADER 2</h1></header> <div class="content"><h1>CONTENT</h1></div> <header class="header"><h1>HEADER 3</h1></header> <div class="content"><h1>CONTENT</h1></div> </section>

Answer 3

如果您希望標題 2 和標題 3 具有粘性，但在下一個下方顯示為每個標題添加帶有填充的top （此處 header-2 具有top: 50px;因此它不會覆蓋第一個，而第三個具有top: 100px; ）。

 html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Roboto', sans-serif; position:relative; } @import url("https://fonts.googleapis.com/css?family=Roboto:100"); h1 { letter-spacing: 3px; margin: 0; padding-left: 10px; padding-top: 10px; color: #fff; font-weight: 100; } .header { width: 100%; height: 50px; position: sticky; top: 0px; } .header:nth-of-type(1){ background-color: dodgerblue; } .header:nth-of-type(2){ background-color: rebeccapurple; } .header:nth-of-type(3){ background-color: chartreuse; } .content { width: 100vw; height: 100vh; background: linear-gradient(70deg, orange, crimson); padding-top: 50px; } .header-2{ top: 50px; } .header-3{ top: 100px; }

 <section> <header class="header"><h1>HEADER 1</h1></header> <div class="content"><h1>CONTENT</h1></div> <header class="header header-2"><h1>HEADER 2</h1></header> <div class="content"><h1>CONTENT</h1></div> <header class="header header-3"><h1>HEADER 3</h1></header> <div class="content"><h1>CONTENT</h1></div> </section>