Section Area gets hidden behind sticky navbar

I am using sticky navbar in my page . However I see that when i try to go to that section via nav link a certain part of section gets hidden behind the navbar. I want my entire section area to be visible below navbar. I tried writing jquery code to set offset but its not helping.

here is my navbar code

 <header  id="navigation-items" style="width:100%; z-index: 99;"> 
        <nav class="navbar navbar-expand-lg navbar-light " style="background-color: #7ea7ca;">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">Navbar</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#section1">Section 1</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#section2">Section 2</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#section3">Section 3</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link " href="#section4">Section 4</a>
                  </li>
                </ul>
                
              </div>
            </div>
          </nav>
    </header>

Here is the section code:

<div class="main">
    <section id="section1"><div class="container">..Section 1..</div> </section>
    <section id="section2"><div class="container">..Section 2..</div> </section>
    <section id="section3"><div class="container">..Section 3..</div> </section>
    <section id="section4"><div class="container">..Section 1..</div> </section>
<div>

Here is jquery i wrote for the offset section

$(document).ready(function(){

/* For setting the offset header */

var headerHeight = $("#navigation-items").height();

$('a[href*="id"]').bind("click", function(e) {

  e.preventDefault();

  var target = $(this).attr("href"); //Get the target
  var scrollToPosition = $(target).offset().top - (headerHeight);
  $('html').animate({
    'scrollTop': scrollToPosition
  }, 300, function(target) {
    window.location.hash = target;
  })

});
  });

Here is the css for my code

.main>section{
  border:1px solid red;
  padding-top:80px
   }

.main>section>.container{
  background-color: rgba(231, 158, 158, 0.884);
}

  .sticky{
   position: fixed;
    top: 0;
    width: 100%

   }
    ```

I am using bootstrap 5 and jquery version 3.5.1. [Link to HTML page and issue][1]


  [1]: https://codepen.io/maddy-176/pen/abyWZEQ

from Recent Questions - Stack Overflow https://ift.tt/2ZpFYqV
https://ift.tt/eA8V8J