试图使用一些不同的方法，但没有发生任何事情。这是我的代码，如何在向下滚动时将其粘贴到页面顶部？
当我尝试它时，导航是在照片的背后和页面上的文字。谁可以帮助我？
<!-- 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 -->
HTML：
<div id="navbar">
<!-- navbar content Here -->
</div>
CSS：
#navbar {
overflow: hidden;
background-color: #333;
}
/* when navbar reaches top this should be added using JS*/
.sticky {
position: fixed;
top: 0;
width: 100%;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}
JS：
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}看来你也在使用Bootstrap，如果是的话;你想要的东西真的很简单;你只需要将sticky-top类添加到导航栏中就可以了，请看这里：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde illum voluptatibus, laborum porro quibusdam officiis cum repudiandae iusto neque, consequatur consectetur error beatae maiores eaque ratione qui temporibus iste quisquam modi minima doloremque
iure. Cumque et labore incidunt alias enim magnam cum nam id ullam, modi nisi eos illo eaque amet hic eum ea natus consequatur necessitatibus! Asperiores, quaerat perspiciatis quibusdam laudantium sunt illo libero ex aspernatur dolores explicabo rem
architecto eos ipsa temporibus repudiandae itaque fugiat tempore ducimus ad eligendi reiciendis commodi. Molestiae ea necessitatibus in dolorum inventore vero et rerum dolore similique, dolores porro adipisci facilis, blanditiis obcaecati cumque, quisquam
voluptatibus nisi magni doloribus rem voluptatem explicabo quis accusantium quibusdam! At quo laudantium ad id eaque ex voluptas illum? Id, beatae. Ducimus, quam assumenda? Dignissimos ad iusto accusamus obcaecati, laudantium blanditiis nam non in repellat
iste repellendus suscipit magni est sapiente vero dolorem deserunt velit veritatis eius inventore?
</p>
<nav class="navbar navbar-expand sticky-top navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde illum voluptatibus, laborum porro quibusdam officiis cum repudiandae iusto neque, consequatur consectetur error beatae maiores eaque ratione qui temporibus iste quisquam modi minima doloremque
iure. Cumque et labore incidunt alias enim magnam cum nam id ullam, modi nisi eos illo eaque amet hic eum ea natus consequatur necessitatibus! Asperiores, quaerat perspiciatis quibusdam laudantium sunt illo libero ex aspernatur dolores explicabo rem
architecto eos ipsa temporibus repudiandae itaque fugiat tempore ducimus ad eligendi reiciendis commodi. Molestiae ea necessitatibus in dolorum inventore vero et rerum dolore similique, dolores porro adipisci facilis, blanditiis obcaecati cumque, quisquam
voluptatibus nisi magni doloribus rem voluptatem explicabo quis accusantium quibusdam! At quo laudantium ad id eaque ex voluptas illum? Id, beatae. Ducimus, quam assumenda? Dignissimos ad iusto accusamus obcaecati, laudantium blanditiis nam non in repellat
iste repellendus suscipit magni est sapiente vero dolorem deserunt velit veritatis eius inventore?
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde illum voluptatibus, laborum porro quibusdam officiis cum repudiandae iusto neque, consequatur consectetur error beatae maiores eaque ratione qui temporibus iste quisquam modi minima doloremque
iure. Cumque et labore incidunt alias enim magnam cum nam id ullam, modi nisi eos illo eaque amet hic eum ea natus consequatur necessitatibus! Asperiores, quaerat perspiciatis quibusdam laudantium sunt illo libero ex aspernatur dolores explicabo rem
architecto eos ipsa temporibus repudiandae itaque fugiat tempore ducimus ad eligendi reiciendis commodi. Molestiae ea necessitatibus in dolorum inventore vero et rerum dolore similique, dolores porro adipisci facilis, blanditiis obcaecati cumque, quisquam
voluptatibus nisi magni doloribus rem voluptatem explicabo quis accusantium quibusdam! At quo laudantium ad id eaque ex voluptas illum? Id, beatae. Ducimus, quam assumenda? Dignissimos ad iusto accusamus obcaecati, laudantium blanditiis nam non in repellat
iste repellendus suscipit magni est sapiente vero dolorem deserunt velit veritatis eius inventore?
</p>