html - 粘性位置不适用于重叠滚动效果

Question

当用户使用 sticky 位置滚动并为每个 div (部分)提供新的背景颜色时，我试图产生重叠效果。然而，即使在将 top 的 sticky 位置设置为 0 之后，divs 也会滚出视口(viewport)。任何帮助都会很棒!

$(document).ready(function(){
	$('#about').click(function(){
            $('#aboutcontainer').slideToggle('slow');
        });
});

html, body {
	margin: 0 auto;
	font-size: 22px;
	width: 100%;
	height: 100%;
}

h3 {
	margin: 0;
}

ul, li {
	margin: 0 auto;
}

span {
	font-weight: 400;
}

.container {
	height:102vh;
}

.contentcontainer {
	display: flex;
  	justify-content: center;
  	align-items: center;
  	height: auto;
}

.vertical-center {
	margin: 0;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

#navbar {
	width: 100%;
	position: sticky;
	top: 0px;
	background-color: #ffffff;
	font-family: Abel;
	height: 100px;
}

#desktop-nav-wrapper {
	padding: 0 45px;
	height: inherit;
	position: relative;
}

#logo {
	font-size: 200%;
    width: auto;
    float: left;
    letter-spacing: 3px;
}

#desktop-nav-wrapper ul {
	margin-top: 6.5vh;
	float: right;
}

#desktop-nav-wrapper li {
	position: relative;
	display: inline-block;
	padding-left: 25px;
	font-weight: 300;
	color: #000000;
	font-family: Abel;
}

#desktop-nav-wrapper li:nth-child(even):hover {
	cursor: default;
}

#desktop-nav-wrapper li:nth-child(odd):hover {
	cursor: pointer;
}

#aboutcontainer {
    display: none;
    background-color: #ffffff;
}

#aboutcontainer p {
    margin-bottom: 0;
    padding-left: 45px;
    text-align: left;
    width: 80%;
    font-family: Lato;
    font-weight: 300;
    font-size: 92%;
}

#one {
	background-color: #ffd700;
	position: sticky;	
	top: 0;
}

#two {
	background-color: #468499;
	position: sticky;
	top: 0;
}

#three {
	background-color: #468499;
	position: sticky;	
	top: 0;
}

@media only screen and (max-width: 768px) {

	#logo {
		margin-top: -1vh;
	}

#desktop-nav-wrapper {
	padding: 0 15px;
	height: inherit;
}

#desktop-nav-wrapper ul {
	float: left;
	padding-left: 0;
	width: 100%;
	margin-top: 11vh;
}

#desktop-nav-wrapper li {
	position: relative;
	display: inline-block;
	padding-left: 0;
	margin-right: 2%;
	font-weight: 300;
	color: #000000;
	font-family: Abel;
}

#aboutcontainer p {
    margin-bottom: 0;
    padding-left: 15px;
    text-align: left;
    width: 90%;
    font-family: Lato;
    font-weight: 300;
    font-size: 80%;
}

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar">
	<div id="desktop-nav-wrapper">
	    <h3 id="logo" class="vertical-center">Test Header</h3>
	        <ul>
	            <li id="about" class="desktop-items">about</li>
	        </ul>
    </div>
 </div>

 <div id="aboutcontainer" style="display: none;">
 		<p>
    		Phasellus vitae semper risus. Quisque in finibus nisi. Sed non rhoncus purus, eu luctus orci. Vestibulum massa nisi, bibendum eget libero ut, tempor mattis metus. Maecenas placerat nisl non mauris fringilla ultricies. Phasellus dignissim velit vitae tellus sodales luctus. Nullam tempus turpis vitae nunc lacinia faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget volutpat nunc. Cras et libero et ligula suscipit finibus et id dui. Duis odio enim, interdum vitae ullamcorper ut, sagittis vitae metus. Phasellus feugiat libero metus, sed tempor erat porttitor ut. Integer vel libero eu ante sollicitudin fermentum non quis nisl. Aliquam blandit dignissim sem, et malesuada risus venenatis eget. Nulla pretium ornare dui fermentum cursus. 
    	</p>
</div>

<div class="container" id="one">
	<div class="contentcontainer">
		<h3>One</h3>
	</div>
</div>

<div class="container" id="two">
	<div class="contentcontainer">
		<h3>Two</h3>
	</div>
</div>

<div class="container" id="three">
	<div class="contentcontainer">
		<h3>Three</h3>
	</div>
</div>

Answer 1

弄明白了...原来 position: sticky 不是 HTML 的粉丝，body 有它们的 height 设置为 100%。我删除了它，它现在工作正常。