滚动到页面顶部和底部时如何显示中间部分的一半？

Question

我为一个简单的 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>

Answer 1

尝试使用此代码。您只需要更改 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;
}

Answer 2

你期待这样吗：

注意：请在全屏模式下查看我的回答

演示：

* {
  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>

滚动到页面顶部和底部时如何显示中间部分的一半？

How to show half of the middle section when scrolled to the top and bottom of the page?

html

css

scroll

css-position