Как сделать так, чтобы моя навигационная панель зафиксировалась наверху при прокрутке вниз? Я также хочу иметь изображение над панелью навигации при прокрутке вверх

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, как показано ниже, как и другие. Это заставляет меню оставаться в верхней части страницы при прокрутке. Но что ты имеешь в виду, что хочешь картинку без меню?

Answer 2

Просто используйте класс sticky-top. Когда вы прокрутите страницу вниз, она будет наверху.

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

Не стесняйтесь заглянуть в документацию Bootstrap, прежде чем спрашивать. Вы могли бы найти, что здесь .

Answer 3

добавить класс "sticky-top" в nav. Для получения дополнительной информации нажмите здесь

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

Answer 4

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