How do you make a nav link scroll stop at the bottom of a navbar that has position: sticky?-CodePudding

Im using Bootstrap 5 and my navbar has a sticky-top attribute. Basically when I click one of the links in my nav it scrolls to that section of the page but some of the content goes behind the navbar. Im wondering how I can get the scrolling to hard stop at the bottom of the navbar so the section isnt cutoff.

Here is the majority of the html code:

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>



<!-- Body -->
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="100" data-bs-smooth-scroll="true">
  <!-- Navigation Bar-->
  <nav id="navbar" >
    <div >
      <a href="#" >Navbar</a>
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
            <span ></span>
            <span ></span>
            <span ></span>
            </button>
      <div  id="navmenu">
        <ul >
          <li >
            <a href="#about" >About Us</a>
          </li>
          <li >
            <a href="#services" >Services</a>
          </li>
          <li >
            <a href="#art" >Artwork</a>
          </li>
          <li >
            <a href="#contact" >Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div id="navbar">
    <h4 id="about">About Us</h4>
    <p>Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger, and first appeared in Detective Comics #27 in 1939.</p>
    <img  src="https://static1.cbrimages.com/wordpress/wp-content/uploads/2020/08/batman-2.jpg" />
    <h4 id="services">Our Services</h4>
    <p>Superman is a fictional superhero. The character was created by writer Jerry Siegel and artist Joe Shuster, and first appeared in the comic book Action Comics #1. The character regularly appears in comic books published by DC Comics, and has been
      adapted to a number of radio serials, movies, and television shows.</p>
    <img  src="https://vignette.wikia.nocookie.net/marvel_dc/images/a/a5/Superman_Vol_5_1_Textless.jpg/revision/latest?cb=20180711061148" />
    <h4 id="art">Community Artwork</h4>
    <p>Yoda was a legendary Jedi Master and stronger than most in his connection with the Force. Small in size but wise and powerful, he trained Jedi for over 800 years, playing integral roles in the Clone Wars, the instruction of Luke Skywalker, and unlocking
      the path to immortality.</p>
    <img  src="https://vignette.wikia.nocookie.net/starwars/images/d/d6/Yoda_SWSB.png/revision/latest?cb=20150206140125" />
    <h4 id="contact">Contact Us!</h4>
    <p>Discovered as a slave on Tatooine by Qui-Gon Jinn and Obi-Wan Kenobi, Anakin Skywalker had the potential to become one of the most powerful Jedi ever, and was believed by some to be the prophesied Chosen One who would bring balance to the Force.</p>
    <img  src="https://vignette.wikia.nocookie.net/disney/images/5/50/Profile_-_Anakin_Skywalker.png/revision/latest?cb=20190313110540" />
  </div>
</body>

CodePudding user response：

You can use fixed-top bootstrap class to make header sticky like this :

<div >
your content
</div>

CodePudding user response：

The problem comes form 0 padding & margin of your content boxes. There are 2 solutions: 1.use padding-top equal to height size of your nav bar. 2.use scroll event in javascript and set offset equal to nav bar height. I put the css code for the first solution and if you want to use second, I can help you.

#about,
#services,
#art,
#contact{
padding-top:72px;
}