Скрыть заголовок при прокрутке вниз после определенного момента?

У меня есть этот код, используемый с https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp

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

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}
#navbar {
  background-color: #333; /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: 0; /* Stay on top */
  width: 100%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

/* Style the navbar links */
#navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

section {
background-color: grey;
margin-top: 50px;
}
<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan tincidunt massa in tristique. Vestibulum mattis erat sed porttitor cursus. Praesent dignissim, sem vel tincidunt venenatis, dolor orci sollicitudin ipsum, et vestibulum mauris ex non felis. Cras pulvinar lectus eu risus lobortis malesuada. Sed accumsan metus quis ante scelerisque molestie. Maecenas molestie arcu in massa egestas tempus. Vestibulum augue purus, tincidunt ut porta quis, pulvinar imperdiet neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque id convallis odio.

Sed fringilla rutrum nulla. Nam diam ex, gravida at nisl vel, feugiat vehicula ex. Duis et ligula vitae velit pretium finibus quis sit amet diam. Sed ac interdum magna, a pharetra ante. Quisque vestibulum luctus ligula, elementum aliquam sem molestie non. Maecenas auctor magna a magna hendrerit, ornare facilisis tortor finibus. Nulla eu augue leo. Donec euismod scelerisque porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula sit amet nisi eu porttitor. Donec dictum quis erat ut tincidunt. Curabitur pharetra iaculis purus. In hac habitasse platea dictumst. Aenean egestas laoreet lorem, ac eleifend magna.

Sed quis feugiat diam. Nunc euismod dapibus mauris quis egestas. Nam venenatis magna sit amet lorem semper, eget sagittis dolor malesuada. Sed fringilla pulvinar maximus. In venenatis ligula magna, id pulvinar magna auctor condimentum. Aliquam dictum erat sit amet elit tristique feugiat. Curabitur feugiat nunc ultricies sapien finibus condimentum. Duis gravida, ipsum sit amet luctus vulputate, odio quam ornare sapien, non aliquam enim metus eget dolor. Duis nisl lorem, tempor non cursus nec, lobortis vel nibh. Suspendisse consectetur sed nisl in vestibulum. Nunc at placerat ante. Donec ante massa, mollis vel ultricies sed, ullamcorper at risus. Morbi euismod laoreet sagittis.</section>

В настоящее время заголовок исчезает, как только вы начинаете прокручивать вниз, но я бы хотел, чтобы он оставался видимым до тех пор, пока вы не прокрутите высоту заголовка.

Надеюсь, это имеет смысл.


javascript html jquery css header
person user13671908    schedule 23.08.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете просто проверить, когда позиция прокрутки больше 120, а затем заставить ее исчезнуть, вернуть обратно, когда она меньше 120.

  window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (currentScrollPos > 120) {
      document.getElementById("navbar").style.top = "-50px";
    } else {
      document.getElementById("navbar").style.top = "0px";

    }
  }
person Eugen Sunic    schedule 23.08.2020