html - 向上滚动分区并修复另一个分区
问题描述
我正在尝试向上滑动第一个分区并在向上滚动后使第二个分区可见。我想要的是在向上滚动绿色分区时修复红色分区。我试图从很长时间内解决这个问题,但我无法解决。有人可以帮我吗?
#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>
因为现在你只有两个部分,红色的一个在固定的位置,所以绿色会覆盖身体,让绿色向上,你需要在身体上增加一些空间来向上滚动绿色。现在我已经为滚动添加了足够的边距。
推荐阅读
- javascript - 将 Apollo GraphQL 查询解析为包含和属性字段的 Sequelize 查询
- python - 基于子列表中的第一个元素的列表集群列表
- excel - 合并另一列中的重复单元格
- html - Bootstrap 4 网格 - .col-breakpoint vs .col-number
- r - 生成重复随机抽样
- datatable - 从其他表中的值的总和创建表
- html - 父元素有填充时错误的最大高度
- dart - 如果没有可用的网络连接,flutter firestore setData 没有错误
- node.js - 测试 Nodejs 共享实例的最佳实践
- python - 返回时可以留下文件而不关闭吗?