Получение позиции прокрутки для JavaScript показать скрыть Nav - PullRequest
0 голосов
/ 25 декабря 2018

Я использую некоторые акции javascript, чтобы скрыть Nav при прокрутке вниз и показать снова при прокрутке вверх.

Работает отлично, за исключением Safari для мобильных устройств.

Когдастраница прокручивается вниз, затем перетаскивается вверх за верх, или навигация идет вверху страницы, и вы перетаскиваете экран вниз, упругая / избыточная прокрутка в Safari приводит к тому, что позиция прокрутки становится больше 0 и скрывает навигацию.

Моя надежда заключается в том, чтобы обойти эту проблему, вызывая javascript только после прокрутки вниз, например, на 100 пикселей.

Моя проблема в изменении этого кода по крайней мере заключается в отсутствии языка JavaScriptосновы.

Вот код, который отлично работает в настольных браузерах:

<script type="text/javascript">
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
/* ID Phlox:site-header Elementor Custom:iz-nav  */
function getBodyScrollTop () { const el = document.scrollingElement || document.documentElement return el.scrollTop }
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos ) {
    document.getElementById("site-header").style.top = "0";
  } else {
    document.getElementById("site-header").style.top = "-60px";
  }
  prevScrollpos = currentScrollPos;
} 
</script> 

Вот 2 примера того, что я пытался добавить / изменить в этом скрипте, чтобы Nav была видна ( style.top = "0" ) когда прокрутка была в диапазоне от 0 до 100 пикселей.

По сути, "получить" переменную pos прокрутки и использовать && (AND) ||(ИЛИ) операторы для логических условий.

1)

if (prevScrollpos > currentScrollPos && currentScrollPos > 100 ) {
document.getElementById("site-header").style.top = "0";

2)

if (prevScrollpos > currentScrollPos || window.pageYOffset < 100 ) {
document.getElementById("site-header").style.top = "0"

Я даже близко к тому, как это должно быть написано?

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