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

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

你是否期待这样：

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

演示：

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

Answer 2

试试这个代码。您只需要更改 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;
}