Section Area gets hidden behind sticky navbar - html

Question

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

Answer 1

Use scroll-margin-top on sections.
section {
scroll-margin-top: 60px;
}