html - 向上滚动分区并修复另一个分区

Question

我试图向上滑动第一个分区并在向上滚动后使第二个分区可见。我想要的是在向上滚动绿色分区时固定红色分区。很长一段时间以来，我一直在努力解决这个问题，但我做不到。有人可以帮我解决这个问题吗？

 #pagebody{
 color:white;
background-color:red;
 	position: -webkit-sticky;
	position: sticky;
	top: 0;
	
	
 	
 }
#header{
color:white;
	   background-color:green;
	   position: -webkit-sticky;
	position: sticky;
	top: 10%;
}

<div id="header">Lato is a sanserif type­face fam­ily designed in the Sum­mer 2010 by Warsaw-​​based designer Łukasz Dziedzic (“Lato” means “Sum­mer” in Pol­ish). In Decem­ber 2010 the Lato fam­ily was pub­lished under the open-​​source Open Font License by his foundry tyPoland, with sup­port from Google.

In 2013 – 2014, the fam­ily was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 fam­ily now sup­ports 100+ Latin-​​based lan­guages, 50+ Cyrillic-​​based lan­guages as well as Greek and IPA pho­net­ics. In the process, the met­rics and kern­ing of the fam­ily have been revised and four addi­tional weights were created.
Sup­port fur­ther devel­op­ment of Lato through a donation!<br>
Lato is a sanserif type­face fam­ily designed in the Sum­mer 2010 by Warsaw-​​based designer Łukasz Dziedzic (“Lato” means “Sum­mer” in Pol­ish). In Decem­ber 2010 the Lato fam­ily was pub­lished under the open-​​source Open Font License by his foundry tyPoland, with sup­port from Google.

In 2013 – 2014, the fam­ily was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 fam­ily now sup­ports 100+ Latin-​​based lan­guages, 50+ Cyrillic-​​based lan­guages as well as Greek and IPA pho­net­ics. In the process, the met­rics and kern­ing of the fam­ily have been revised and four addi­tional weights were created.
Sup­port fur­ther devel­op­ment of Lato through a donation!<br>
Lato is a sanserif type­face fam­ily designed in the Sum­mer 2010 by Warsaw-​​based designer Łukasz Dziedzic (“Lato” means “Sum­mer” in Pol­ish). In Decem­ber 2010 the Lato fam­ily was pub­lished under the open-​​source Open Font License by his foundry tyPoland, with sup­port from Google.

In 2013 – 2014, the fam­ily was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 fam­ily now sup­ports 100+ Latin-​​based lan­guages, 50+ Cyrillic-​​based lan­guages as well as Greek and IPA pho­net­ics. In the process, the met­rics and kern­ing of the fam­ily have been revised and four addi­tional weights were created.
Sup­port fur­ther devel­op­ment of Lato through a donation!</div>
<br>
<br>
<br>
<div id="pagebody">Lato is a sanserif type­face fam­ily designed in the Sum­mer 2010 by Warsaw-​​based designer Łukasz Dziedzic (“Lato” means “Sum­mer” in Pol­ish). In Decem­ber 2010 the Lato fam­ily was pub­lished under the open-​​source Open Font License by his foundry tyPoland, with sup­port from Google.

In 2013 – 2014, the fam­ily was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 fam­ily now sup­ports 100+ Latin-​​based lan­guages, 50+ Cyrillic-​​based lan­guages as well as Greek and IPA pho­net­ics. In the process, the met­rics and kern­ing of the fam­ily have been revised and four addi­tional weights were created.
Sup­port fur­ther devel­op­ment of Lato through a donation!<br>
Lato is a sanserif type­face fam­ily designed in the Sum­mer 2010 by Warsaw-​​based designer Łukasz Dziedzic (“Lato” means “Sum­mer” in Pol­ish). In Decem­ber 2010 the Lato fam­ily was pub­lished under the open-​​source Open Font License by his foundry tyPoland, with sup­port from Google.

In 2013 – 2014, the fam­ily was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 fam­ily now sup­ports 100+ Latin-​​based lan­guages, 50+ Cyrillic-​​based lan­guages as well as Greek and IPA pho­net­ics. In the process, the met­rics and kern­ing of the fam­ily have been revised and four addi­tional weights were created.
Sup­port fur­ther devel­op­ment of Lato through a donation!<br>
Lato is a sanserif type­face fam­ily designed in the Sum­mer 2010 by Warsaw-​​based designer Łukasz Dziedzic (“Lato” means “Sum­mer” in Pol­ish). In Decem­ber 2010 the Lato fam­ily was pub­lished under the open-​​source Open Font License by his foundry tyPoland, with sup­port from Google.

In 2013 – 2014, the fam­ily was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 fam­ily now sup­ports 100+ Latin-​​based lan­guages, 50+ Cyrillic-​​based lan­guages as well as Greek and IPA pho­net­ics. In the process, the met­rics and kern­ing of the fam­ily have been revised and four addi­tional weights were created.
Sup­port fur­ther devel­op­ment of Lato through a donation!</div>

Answer 1

#pagebody{
  color: white;
  background-color: red;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;	
}

#header{
  color: white;
  background-color: green;
  position: -webkit-sticky;
  position: relative;
  z-index: 9999;
  margin-bottom: 100vw; // You need to add some space so that green panel should go up on scroll.
}

body {
  margin: 0;
  padding: 0;
}

<div id="header">Lato is a sanserif type­face fam­ily designed in the Sum­mer 2010 by Warsaw-​​based designer Łukasz Dziedzic (“Lato” means “Sum­mer” in Pol­ish). In Decem­ber 2010 the Lato fam­ily was pub­lished under the open-​​source Open Font License by his foundry tyPoland, with sup­port from Google.

In 2013 – 2014, the fam­ily was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 fam­ily now sup­ports 100+ Latin-​​based lan­guages, 50+ Cyrillic-​​based lan­guages as well as Greek and IPA pho­net­ics. In the process, the met­rics and kern­ing of the fam­ily have been revised and four addi­tional weights were created.
Sup­port fur­ther devel­op­ment of Lato through a donation!<br>
Lato is a sanserif type­face fam­ily designed in the Sum­mer 2010 by Warsaw-​​based designer Łukasz Dziedzic (“Lato” means “Sum­mer” in Pol­ish). In Decem­ber 2010 the Lato fam­ily was pub­lished under the open-​​source Open Font License by his foundry tyPoland, with sup­port from Google.

In 2013 – 2014, the fam­ily was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 fam­ily now sup­ports 100+ Latin-​​based lan­guages, 50+ Cyrillic-​​based lan­guages as well as Greek and IPA pho­net­ics. In the process, the met­rics and kern­ing of the fam­ily have been revised and four addi­tional weights were created.
Sup­port fur­ther devel­op­ment of Lato through a donation!<br>
Lato is a sanserif type­face fam­ily designed in the Sum­mer 2010 by Warsaw-​​based designer Łukasz Dziedzic (“Lato” means “Sum­mer” in Pol­ish). In Decem­ber 2010 the Lato fam­ily was pub­lished under the open-​​source Open Font License by his foundry tyPoland, with sup­port from Google.

In 2013 – 2014, the fam­ily was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 fam­ily now sup­ports 100+ Latin-​​based lan­guages, 50+ Cyrillic-​​based lan­guages as well as Greek and IPA pho­net­ics. In the process, the met­rics and kern­ing of the fam­ily have been revised and four addi­tional weights were created.
Sup­port fur­ther devel­op­ment of Lato through a donation!</div>
<br>
<br>
<br>
<div id="pagebody">Lato is a sanserif type­face fam­ily designed in the Sum­mer 2010 by Warsaw-​​based designer Łukasz Dziedzic (“Lato” means “Sum­mer” in Pol­ish). In Decem­ber 2010 the Lato fam­ily was pub­lished under the open-​​source Open Font License by his foundry tyPoland, with sup­port from Google.

In 2013 – 2014, the fam­ily was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 fam­ily now sup­ports 100+ Latin-​​based lan­guages, 50+ Cyrillic-​​based lan­guages as well as Greek and IPA pho­net­ics. In the process, the met­rics and kern­ing of the fam­ily have been revised and four addi­tional weights were created.
Sup­port fur­ther devel­op­ment of Lato through a donation!<br>
Lato is a sanserif type­face fam­ily designed in the Sum­mer 2010 by Warsaw-​​based designer Łukasz Dziedzic (“Lato” means “Sum­mer” in Pol­ish). In Decem­ber 2010 the Lato fam­ily was pub­lished under the open-​​source Open Font License by his foundry tyPoland, with sup­port from Google.

In 2013 – 2014, the fam­ily was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 fam­ily now sup­ports 100+ Latin-​​based lan­guages, 50+ Cyrillic-​​based lan­guages as well as Greek and IPA pho­net­ics. In the process, the met­rics and kern­ing of the fam­ily have been revised and four addi­tional weights were created.
Sup­port fur­ther devel­op­ment of Lato through a donation!<br>
Lato is a sanserif type­face fam­ily designed in the Sum­mer 2010 by Warsaw-​​based designer Łukasz Dziedzic (“Lato” means “Sum­mer” in Pol­ish). In Decem­ber 2010 the Lato fam­ily was pub­lished under the open-​​source Open Font License by his foundry tyPoland, with sup­port from Google.

In 2013 – 2014, the fam­ily was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 fam­ily now sup­ports 100+ Latin-​​based lan­guages, 50+ Cyrillic-​​based lan­guages as well as Greek and IPA pho­net­ics. In the process, the met­rics and kern­ing of the fam­ily have been revised and four addi­tional weights were created.
Sup­port fur­ther devel­op­ment of Lato through a donation!</div>

因为现在你只有两个部分，红色的部分在固定位置，所以绿色会覆盖 body ，为了让绿色向上，你需要在 body 中添加一些空间来向上滚动绿色。现在我已经为滚动添加了足够的边距。