粘性位置无法发挥重叠的滚动效果

Question

当用户使用sticky位置滚动并为每个div（部分）赋予新的背景色时，我正在尝试产生重叠效果。但是，即使将top位置的sticky设置为0，divs仍会滚动出视口。任何帮助都会很棒！

$(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的{​​{1}}设置为height的粉丝。我删除了它，现在可以正常工作了。