Липкий заголовок охватывает целевой раздел - PullRequest
Новая
       69

Липкий заголовок охватывает целевой раздел

0 голосов
/ 06 августа 2020

Я начал создавать эту веб-страницу, и вверху страницы вы можете увидеть липкий заголовок. С этим есть проблема: если я нажимаю на ярлыки, заголовок переходит в раздел, но из-за заголовка вы не можете видеть какую-то часть целевой части.

Спасибо за любую помощь!

Пример 

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>

1 Ответ

0 голосов
/ 07 августа 2020

Не могли бы вы дать целевой части верхний отступ, чтобы оставалось достаточно места для заголовка? Например: 

#details{
  padding-top: 100px;
}
...