1
我试图让页面顶部滚动页面顶部的导航栏。如何在图像之后将导航栏粘贴到页面的顶部？
所以这将是类似的东西，codepen.io，但有一张照片。因此，在图片上，它会延伸到屏幕的大部分区域，但也会根据窗口的大小进行调整。因此，我不能在200像素后面说出，因为图像的大小会有所不同。如果可能的话，有没有一种方法可以创建一个Javascript函数，一旦注册到任何元素的底部，navbar将会粘住？
HTML：
<header>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Mount_Shuksan,_Picture_Lake_(2362739742).jpg" alt="">
</header>
<nav id = "nav_bar">
<ul class = "navbar-list">
<li>
<a href="">link1</a>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">link2</a>
<div class="dropdown-content">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
<a href="">link 4</a>
</div>
</li>
<li>
<a href="">link 3</a>
</li>
<li>
<a href="">link4</a>
</li>
</ul>
</nav>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
CSS：
body{
margin:0px;
}
header{
margin: 0 auto;
/*position: fixed;*/
top: 0;
}
img{
max-width: 100%;
text-align: center;
top: 0;
display: block;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: green;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
codepen.io - 包括样品图像
哪些错误与codepen？这似乎是做你的事后，我错过了什么？ – Keith
在我的代码笔中，在帖子底部的那个，导航栏不会在图像滚动过去后粘到页面的顶部。 – CatTreats