Скрыть панель навигации при прокрутке - PullRequest
0 голосов
/ 21 января 2020

, если prevScrollPos> currentScrollPos. Как это могло быть правдой? когда prevScrollPos равен 0, а currentScrollPos никогда не меньше 0

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

Ответы [ 3 ]

0 голосов
/ 21 января 2020

Попробуйте это

function get_scroll() {
  if(window.scrollY > 30)
  {
    document.getElementById("navbar").style.top = "-50px";

  }else{
    document.getElementById("navbar").style.top = "0";
  }
}

document.getElementsByTagName("BODY")[0].setAttribute("onscroll","get_scroll()");
0 голосов
/ 21 января 2020

Я добавил несколько комментариев к вашему коду, это может очистить ваши сомнения.

var prevScrollPos = window.pageYOffset;
// here if we assume the prevScrollPos as 0 then when the user scrolls the function gets executed.
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  // Here, say currentScrollPos = 50px; so if condition fails and else block gets executed.
  if (prevScrollPos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  // since the prevScrollpos is being updated here, it will be greater than 0(will be 50px) next time.
  prevScrollpos = currentScrollPos;
}

и когда пользователь прокручивает вверх, функция вызывается снова, и на этот раз условие if удовлетворяется, потому что 50px (prevScrollPos) будет быть больше 0 (при условии, что он прокрутил весь путь вверх).

0 голосов
/ 21 января 2020

prevScrollPos обновляется в конце вашей функции, поэтому при прокрутке вверх currentScrollPos будет меньше prevScrollPos.

Кроме того, вы получили опечатку:

prevScrollPos = currentScrollPos;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...