时间戳

首页 > 解决方案 > 粘性标题覆盖目标部分

javascript - 粘性标题覆盖目标部分

问题描述

我开始做这个网页，在页面的顶部，你可以看到一个粘性标题。它有一个问题：如果我单击标签，标题会跳转到该部分，但是由于标题，您看不到目标部分的某些部分。

感谢您的每一次帮助！

例子

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>

标签： javascripthtmlcssheadersticky

解决方案

你能给目标部分一个顶部填充，为标题留出足够的空间吗？例如：

#details{
  padding-top: 100px;
}

推荐阅读