Скрыть при прокрутке вниз, появляется при прокрутке вверх - PullRequest
Новая
       18

Скрыть при прокрутке вниз, появляется при прокрутке вверх

1 голос
/ 10 мая 2019

У меня есть этот код, который скрывает мою панель навигации при прокрутке вниз и появляется при прокрутке вверх.В настоящее время он скрывается при прокрутке вниз.Я хотел бы изменить это поведение, чтобы скрыть после прокрутки 200px .

Спасибо за вашу помощь! 

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

1 Ответ

1 голос
/ 10 мая 2019

В настоящее время каждый раз при прокрутке переменная prevScrollpos обновляется. Если вы измените это поведение для обновления только при прокрутке вверх, вы сможете использовать эту переменную для измерения необходимой прокрутки в 200 пикселей. 

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("custom-navbar").style.top = "0";
    prevScrollpos = currentScrollPos;
  } else if (currentScrollPos > prevScrollpos + 200){
    document.getElementById("custom-navbar").style.top = "-73px";
    prevScrollpos = currentScrollPos;
  }
}

Вы действительно хотите очистить этот код. Например, prevScrollpos имеет нижний регистр p, в то время как currentScrollPos имеет верхний регистр P, что является непоследовательным и приведет к ошибкам при неправильном наборе текста позже. Также, как это структурировано, вы будете постоянно изменять стиль своей панели навигации при прокрутке. Каждый раз, когда вы прокручиваете вверх, вы перезаписываете "0" с помощью "0", и то же самое верно для каждого раза, когда вы прокручиваете 200px вниз.

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

...