有人知道如何在滚动固定标题上增加多个吗?我检查了诸如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>
答案 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>