向上滚动分区并修复另一个分区
scrolling division up and another division to be fixed
我正在尝试向上滑动第一个分区并在向上滚动后使第二个分区可见。我想要的是在向上滚动绿色分区时固定红色分区。很长一段时间以来，我一直在努力解决这个问题，但我做不到。有人可以帮我解决这个问题吗？
#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 typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!</div>
<br>
<br>
<br>
<div id="pagebody">Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!</div>
#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 typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!</div>
<br>
<br>
<br>
<div id="pagebody">Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!</div>
因为现在你只有两个部分，红色的部分在固定位置，所以绿色会覆盖 body 为了让绿色上去，你需要在 [= 中添加一些 space 20=] 向上滚动绿色。现在我已经为滚动添加了足够的边距。
我正在尝试向上滑动第一个分区并在向上滚动后使第二个分区可见。我想要的是在向上滚动绿色分区时固定红色分区。很长一段时间以来，我一直在努力解决这个问题，但我做不到。有人可以帮我解决这个问题吗？
#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 typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!</div>
<br>
<br>
<br>
<div id="pagebody">Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!</div>
#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 typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!</div>
<br>
<br>
<br>
<div id="pagebody">Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!<br>
Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google.
In 2013 – 2014, the family was greatly extended to cover 3000+ glyphs per style. The Lato 2.010 family now supports 100+ Latin-based languages, 50+ Cyrillic-based languages as well as Greek and IPA phonetics. In the process, the metrics and kerning of the family have been revised and four additional weights were created.
Support further development of Lato through a donation!</div>
因为现在你只有两个部分，红色的部分在固定位置，所以绿色会覆盖 body 为了让绿色上去，你需要在 [= 中添加一些 space 20=] 向上滚动绿色。现在我已经为滚动添加了足够的边距。