当滚动到页面的顶部和底部时，如何显示中间部分的一半？
当滚动到页面的顶部和底部时，如何显示中间部分的一半？
提问于 2019-09-04 11:29:14
我为一个简单的html页面编写了这段代码，其中有三个部分。顶部(第一)和底部(第三)为全屏幕部分，中间部分必须同时显示在顶部和底部部分，即中段的上半部分和下半部分与第三部分。
我能够正确地显示第一部分(当滚动位置在顶部时)，但不能显示第二部分(当滚动位置在底部时)。
有人能告诉我怎么做到这一点吗？
全文：https://i.imgur.com/YDV1usM.png
当滚动位置在顶部时：https://i.imgur.com/Mngkqth.png
当滚动位置在底部时：https://i.imgur.com/wugOxCY.png
* {
font-family: monospace;
}
h2 {
font-size: 100px;
font-family: monospace;
}
.section-1, .section-3 {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.section-2 h6 {
font-size: 18px;
position: relative;
margin: 80px 0 !important;
}
.section-2 p {
font-size: 20px;
position: relative;
}
.section-2 {
text-align: center;
margin-top: -145px;
}
.section-2 h6:after {
content: '';
position: absolute;
height: 60px;
width: 1px;
background: #000;
left: 50%;
top: 30px;
}<div class="section-1">
<h2>SECTION 1</h2>
</div>
<div class="section-2">
<h6>Scroll</h6>
<p>Studio Liana Lalush</p>
</div>
<div class="section-3">
<h2>SECTION 3</h2>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-09-04 12:51:52
你是这么期待的吗？
注意:查看我在全屏模式下的答案
演示：
* {
font-family: monospace;
}
h2 {
font-size: 100px;
font-family: monospace;
}
.section-1,
.section-3 {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.section-2 h6 {
font-size: 18px;
position: relative;
margin: 70px 0 !important;
}
.section-2 p {
font-size: 20px;
position: relative;
}
.section-2 {
text-align: center;
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
}
.section-2 h6:after {
content: '';
position: absolute;
height: 60px;
width: 1px;
background: #000;
left: 50%;
top: 25px;
}<div class="section-1">
<h2>SECTION 1</h2>
</div>
<div class="section-2">
<h6>Scroll</h6>
<p>Studio Liana Lalush</p>
</div>
<div class="section-3">
<h2>SECTION 3</h2>
</div>
Stack Overflow用户
发布于 2019-09-04 12:03:26
试试这段代码。您只需要更改css代码。
* {
font-family: monospace;
}
h2 {
font-size: 100px;
font-family: monospace;
}
.section-1 {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.section-3{
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.section-2 h6 {
font-size: 18px;
position: relative;
margin: 80px 0 !important;
}
.section-2 p {
font-size: 20px;
position: relative;
}
.section-2 {
text-align: center;
margin-top: -145px;
}
.section-2 h6:after {
content: '';
position: absolute;
height: 60px;
width: 1px;
background: #000;
left: 50%;
top: 30px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57787457
复制相关文章
相似问题
腾讯云开发者
