我想在我的导航栏上方有一张图片，但是当我向下滚动时，我希望它固定在顶部，所以无论我向下滚动多少，它总是在顶部，但一直向上滚动我想看到上面的图片。
这是我的码写笔：https://codepen.io/MestreALMO/pen/LYEwLPY?editors=1000
p {
text-indent: 50px;
}
img {
width: 100%;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid bg-light" style="height: 400px; padding:0px;">
<img class="container-fluid bg-light" style="height: 400px; padding:0px;" src="https://img.elo7.com.br/product/zoom/1B7C0CA/painel-de-festa-colors-festa-personalizada.jpg"></img>
</div>
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" id="hero" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" id="about" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" id="services" href="#">Services</a></li>
</ul>
</div>
</nav>
<div class="container-fluid bg-secondary" style="height: 5000px;">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, reiciendis voluptas quia qui tempora, inventore quis ad corrupti culpa nihil autem voluptatibus illo minima alias expedita hic, vel consequatur rem! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Ratione delectus ut doloribus tempore amet pariatur cupiditate, necessitatibus id, sed eum cum? Perferendis corrupti nulla accusamus exercitationem id temporibus dicta ipsum.</p>
</div>在导航中添加"sticky-top"类。欲了解更多信息，请单击此处
<nav class="navbar sticky-top navbar-dark bg-dark navbar-expand-sm">
只需使用sticky-top类。当您向下滚动页面时，它会粘在顶部。
<nav class="navbar sticky-top navbar-dark bg-dark navbar-expand-sm">
在询问之前，请随时查看 Bootstrap 文档。你可以在这里找到它。
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top>
在导航类中使用粘性顶部，如下所示，就像其他人也说的那样。这使得菜单在您滚动时保持在页面顶部。但是你的意思是你想要图片在菜单上吗？
<nav class="sticky-top navbar navbar-dark bg-dark navbar-expand-sm">
<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" id="hero" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" id="about" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" id="services" href="#">Services</a></li>
</ul>
</div>
</nav>