如何制作多个滚动固定的标题栏和导航栏，使其始终停留在页面顶部？

Question

有人知道如何制作多个滚动固定的标题吗？我已经查看了像这样的答案。

我想要第一个标题，在已经固定在屏幕顶部的情况下，在第二个标题之前停止，并且当第一个标题被滚动超过时，第二个标题应该取代第一个标题，并粘在屏幕顶部。

但是，这样的答案对我不起作用，因为它们使用了我没有使用的库，例如jQuery，或者它们过于复杂。到目前为止，我已经通过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>

- MWR

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>
  <h1>CONTENT</h1>
</div>

在 jsFiddle 上查看

解释：

使用正确的标记，position: sticky将起作用。

PS：我知道已经有一个使用position:sticky的答案，但在那个解决方案中，前一个标题不停止而与下一个标题重叠。在我的解决方案中，它会在下一个粘贴之前停止。

- Devansh J

---

哇，你把头部元素变成了.content的子元素。你不知道你的回答和之前的回答帮了我多少忙，我用JavaScript做了这个，并附加了一个onscroll事件监听器，这需要很多计算能力。有了这个，它减少了很多。非常感谢！！！ - MWR

哈哈 xD 欢迎！:D - Devansh J

Answer 2

如果您想让标题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>

- madav

---

太好了！我试图为标题添加一个点击处理程序，以便单击它们会将您滚动到该部分的顶部，但似乎dom的scrollIntoView函数与浮动粘性不兼容。您是否知道使其正常工作的方法？ - Anthony

@Anthony 哦，有趣。你有代码片段吗？ - madav

是的，这里有；向下滚动直到所有标题都被分组在一起，然后依次点击标题3、2、1，以查看scrollIntoView函数的调用不会导致任何内容显示不正确：https://jsfiddle.net/qt56cpv8/ - Anthony

Answer 3

如果没有您的JavaScript代码，我建议使用 position:sticky，它可以达到您想要的效果。

在此处了解更多信息：CSS position（英文）

在现代浏览器中支持良好，请参见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>

- Mihai T