html - 我怎样才能让我的导航粘在页面顶部？

Question

尝试使用一些不同的方法，但没有真正发生。这是我的代码，如何让它在向下滚动时粘在页面顶部？

当我尝试它时，导航位于页面上照片和文本的后面。谁能帮帮我？

<!-- Header start -->
<header>
        <div class="menu-area" id="">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <div class="logo">
                            <!--== change the logo name ==-->
                            <a href="index.html">
                               <h3><span>CHRISTIAAN</span>DESMET</h3>
                            </a>
                        </div>
                        <!-- Responsive Menu Start -->
                        <div class="responsive-menu"></div>
                        <!-- Responsive Menu End -->
                    </div>
                    <div class="col-md-9 col-sm-12">
                        <div class="mainmenu">
                            <nav>
                                <ul id="navigation">
                                    <li class="current-page-item"><a href="#home">home</a>
                                    </li>
                                    <li>
                                        <a href="#overmij">
                                        over mij
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#producten">producten</a>
                                    </li>
                                    <li><a href="contact.html">contact</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</header>
<!-- Header End -->

Answer 1

只需添加类名并根据您的要求进行更改

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;  
}