Sticky header covers targeted section

I started to make this webpage, and on the top of the page, you can see a sticky header. There is a problem with it: If I click on the labels, the header jump to the section, but because of the header you can't see some part of the targeted part.

Thank you for every help!

Example

window.onscroll = function() {myFunction()};
            
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
  header.classList.add("sticky");
  } else {
  header.classList.remove("sticky");
  }
}

.sticky {
    position: fixed;
    top: 10;
    height: 20vh;
    width:100%;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
  }

<header class="header" id="myHeader">
        
        <div class="logo-container" > 
        <a href="#"><img src="./img/logo.png" height="120"  alt="logo"/> </a>
        </div>
        <nav>
            <ul class="nav-links">
                <li><a class="nav-link" href="#details">DETAILS</a></li>
                <li><a class="nav-link" href="#description">DESCRIPTION</a </li>
                <li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
            </ul>
        </nav>
        <div class="calendar">
            <img src="./img/calendar.png" height="40" alt="calendar" />
        </div>

Solution

Could you give the targeted part a top padding that would allow enough space for the header? E.g.:

#details{
  padding-top: 100px;
}