css - 使用 CSS 的顶部导航栏

Question

我想让我的导航栏在网页上滚动时停留在顶部。

我曾尝试在此处搜索解决方案，但由于它会导致更多错误而苦苦挣扎。

当使用 position:fixed 时，我发现它会导致我想要位于横幅 Logo 下方的原始位置出现问题。

我的 HTML 和 CSS 代码如下。

谢谢

/* ******************* */
/* Navigiation         */
/* ******************* */

#sitenav a {
    text-decoration: none;
    color: white;
    padding: inherit;
    
}

#sitenav ul {
    background: black;
    padding: 15px;
}
#sitenav ul li {
    
    padding: 15px;
    background: black;
    display: block;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    display: inline;
}

#sitenav ul li:hover {
    background: rgb(43, 78, 89);
    color:white;
    cursor:pointer;
}

<header class="clearfix">
   <div id="banner" class="middlecontent">
       <a href="index.html"><img  src="images/logobanner.png"></a>
   </div>
   <nav>
        <div  id="sitenav">
            <ul >
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Curriculum</a></li>
                <li><a href="about_us.html">About</a></li>
                <li><a href="#">Student</a></li>
                <li><a href="#">Staff</a></li>
            </ul>
        </div>
    </nav>
</header>

Answer 1

如果不需要支持旧版浏览器，可以使用position: sticky
https://developer.mozilla.org/pl/docs/Web/CSS/position#Sticky_positioning