我是这个引导词缀的新手。当我问这个问题时，我将尽量清楚：我正在开发这个新网站。在标题中，我在顶部有一张图片，然后是导航栏。
当用户滚动一定数量时，我希望图片从页面顶部滚动，导航栏"固定"到页面顶部。但是，当用户向上滚动页面时，我希望导航栏回到原来的位置，图片回到原来的位置。
我知道你必须使用类，但我不知道我应该使用什么类。
你们中的一些人可能会向我推荐一个解释它的外部链接，但我仍然感到困惑，不知道如何在我的编码中实现它。我正在开发的这个网站将是一个个人网站。
任何帮助，不胜感激。如果您必须复制我的代码并向您展示这种方式，请随时这样做。我只是想知道如何使用我的编码来做到这一点。
这是我的编码
<!DOCTYPE HTML>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="Favicon.ico" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta name="description" content="Allen Henderson's website">
<title>HOME | Allen Henderson</title>
</head>
<body>
<div id="nav-bar-container" data-spy="affix" data-offset-top="200">
<div id="logo">
<center><img src="img/navigation-bar-header-img.jpg" /></center>
</div>
<ul id="nav-bar">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">ENTERTAINMENT</a></li>
</ul>
</div>
<div id="main-content">
<h3>New Content I Have Added:</h3>
</div>
</body>
</html>
这是 CSS：
@font-face {
font-family: Hot Sweat;
src: url(fonts/HotSweat.ttf);
}
@font-face {
font-family: Rusted Orlando;
src: url('fonts/rusted_orlando/Rusted Orlando Demo.ttf');
src: url('fonts/rusted_orlando/Rusted Orlando Demo.otf');
}
@font-face {
font-family: Kimberly;
src: url(fonts/Kimberly/Kimberly.ttf);
src: url(fonts/Kimberly/Kimberly.otf);
}
body {
margin: 0;
}
#nav-bar-container {
background-color: #0404B4;
position: relative;
top: 0;
width: 100%;
}
#nav-bar-container.affix {
position: fixed;
top: 0;
}
#nav-bar {
background-color: #0404B4;
display: block;
position: relative;
float: right;
}
#nav-bar li {
display: inline;
padding: 10px;
display: inline-block;
}
#nav-bar li a {
text-decoration: none;
font-size: 25px;
font-family: Hot Sweat;
color: orange;
text-align: right;
}
#main-content h1 {
font-family: Rusted Orlando;
color: #0404B4;
}
如果您需要其他信息来回答问题，请询问，我会为您澄清。
您要查找的是设置为top: 0的position: sticky。看看这个链接，它介绍了CSS的那一点。另一件事就是查看整个CSS，它非常混乱并且有很多相互冲突的CSS规则，尤其是在display方面。
//THE JAVASCRIPT HERE IS ONLY TO POPULATE THE PAGE, YOU CAN REMOVE IT.
var pageText = document.getElementById("text-content");
//create a loop of text just to populatethe page to get a y-axis overflow
for(var i = 0; i < 100; i++){
pageText.innerHTML += "This is the 100 line of page text "+"<br>";
}#logo{
border:1px solid gray;
width:25%;
margin:auto;
background-color:#ddd;
height:100px;
}
.navbar{
position:sticky !important;
top:0;
background-color:red;
z-index: 2;
}<!DOCTYPE HTML>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="Favicon.ico" />
<meta name="description" content="Allen Henderson's website">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<title>HOME | Allen Henderson</title>
</head>
<body>
<div id="logo-banner text-center">
<div id="logo">
<img src="img/navigation-bar-header-img.jpg" class="img-fluid" alt="top-image"/>
</div>
</div>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Entertainment</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" id="main-content">
<h3>New Content I Have Added:</h3>
<p id="text-content"></p>
</div>
</div>
</div>
</body>
</html>//NOTE:You can easily do this with jQuery, but it's good to know what's happening under the hood.
//we'll be doing this with pure javascript.
var pageText = document.getElementById("text-content");
//create a loop of text just to populatethe page to get a y-axis overflow
for(var i = 0; i < 100; i++){
pageText.innerHTML += "This is the 100 line of page text "+"<br>";
}
//add eventlistener
//this will fire a call backfunction when you start to scroll the page
window.addEventListener("scroll", ()=>{
var logo = document.getElementById("logo");
var myNav = document.getElementById("myNav");
var logoHeight = logo.offsetHeight;//get the logo height;
var pageYaxis = window.pageYOffset;//get the window's y axis
//check of we've scrolled past the image height;
if(pageYaxis > logoHeight){
//this will append bootstraps fixed top class to the nav element
myNav.classList.add("fixed-top");
}else{
//this will remove bootstrap fixed top class to the nav element
myNav.classList.remove("fixed-top");
}
})/*this is the only css we need*/
#logo{
border:1px solid gray;
width:25%;
margin:auto;
background-color:#ddd;
height:100px;
}<!DOCTYPE HTML>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="Favicon.ico" />
<meta name="description" content="Allen Henderson's website">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<title>HOME | Allen Henderson</title>
</head>
<body>
<div id="logo-banner text-center">
<div id="logo">
<img src="img/navigation-bar-header-img.jpg" class="img-fluid" alt="top-image"/>
</div>
</div>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark" id="myNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Entertainment</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" id="main-content">
<h3>New Content I Have Added:</h3>
<p id="text-content"></p>
</div>
</div>
</div>