向上滚动分区，然后固定另一个分区

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>

现在您只有两个部分，红色的部分处于固定位置，因此绿色将覆盖主体并使绿色上升，您需要在主体中添加一些空间以向上滚动绿色。现在，我已经添加了足够的滚动余量。