向下滚动时如何使导航栏固定在顶部？一直向上滚动时，我还希望在导航栏上方有一张图片

Question

我想在我的导航栏上方放一张图片，但当我向下滚动时，我希望它固定在顶部，所以无论我向下滚动多少，它总是在顶部，但滚动所有往上看我想看上面的图片。

这是我的代码笔：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>

Answer 1

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top>

Answer 2

只需使用 sticky-top class。当您向下滚动页面时，它会粘在顶部。

<nav class="navbar sticky-top navbar-dark bg-dark navbar-expand-sm">

在询问之前，请不要犹豫，先查看 Bootstrap 文档。您可能已经发现 here.

Answer 3

在导航中添加 "sticky-top" class。更多信息 click here

<nav class="navbar sticky-top navbar-dark bg-dark navbar-expand-sm">

Answer 4

像下面一样在导航中使用粘性顶部class，就像其他人也说的那样。这使得菜单在您滚动时保持在页面顶部。但是你的意思是你想要菜单上方的图片？

<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>

向下滚动时如何使导航栏固定在顶部？一直向上滚动时，我还希望在导航栏上方有一张图片

How can I make my navbar fix to the top when I scroll down? I also want to have a picture above the navbar when scrolled all the way up

html

css

navbar

bootstrap-4