如何在页面顶部固定多个滚动固定标题/导航栏?

时间:2018-06-26 14:54:23

标签: javascript html css fixed onscroll

有人知道如何在滚动固定标题上增加多个吗?我检查了诸如this之类的答案。

这是我想要的,但是我希望该标头在另一个标头之前停止,并且当第一个标头滚动到第二个标头之后时,应取代第一个标头的位置,并停留在屏幕的顶部。但是它们对我不起作用,因为它们使用的是我不使用的库(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>

3 个答案:

答案 0 :(得分:2)

演示:

http://jsfiddle.net/4tmcLjq3/3/

说明:

带有正确标记

position: sticky将完成工作

PS:我知道已经有一个使用position: sticky的答案,但是在该解决方案中,上一个标头不会停止,而是与下一个标头重叠。在我的解决方案中,是在下一次粘贴之前停止。

答案 1 :(得分:2)

如果您希望标题2和标题3保持粘性,但在下一个标题下方显示,请在每个标题下方添加top,并在其中加上填充(此处标题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>

答案 2 :(得分:1)

如果没有您的JavaScript代码,我建议您使用position:sticky即可实现所需的功能。

在这里position 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>