置顶 header 覆盖目标部分

Question

我开始制作这个网页，在网页的顶部，你可以看到一个置顶贴header。它有一个问题：如果我点击标签，header 跳转到该部分，但是由于 header 你看不到目标部分的某些部分。

谢谢大家的帮助！

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>

Answer 1

您能否为目标部分提供顶部填充，以便为页眉留出足够 space 空间？例如：

#details{
  padding-top: 100px;
}

置顶 header 覆盖目标部分

Sticky header covers targeted section

html

javascript

css

header

sticky