我有以下两个部分组成的简单导航菜单，一个瘦小的横幅和一个顶部导航.我使用了sticky属性来确保TopNAV始终可见(不应显示瘦小的横幅).
但是，如何才能确保在粘滞处于活动状态(以避免间隙)时，顶部导航移动到视区的顶部，并进行其他调整，如使用CSS降低顶部导航的高度(粘滞时)？
.skinny-banner {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: $pastel-green;
width: 100%;
height: 40px;
gap: 24px;
padding-right: 40px;
font-size: 14px;
font-weight: 300;
background-color: lightyellow;
}
.skinny-nav-menu {
display: flex;
gap: 24px;
}
.sticky-container {
position: fixed;
width: 100%;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
position: sticky;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Just adding content that can be scrolled to */
.content {
height: 500px;
background-color: lightblue;
}
.content-1 {
height: 500px;
background-color: lightsalmon;
}
.content-2 {
height: 500px;
background-color: lightgreen;
}<div class="skinny-banner">
<ul class="skinny-nav-menu">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</div>
<div class="sticky-container">
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
<div class="content"></div>
<div class="content-1"></div>
<div class="content-2"></div>