Скролл JavaScript

Question

Сделал навбар, которой при прокрутке вниз пропадает, при прокрутке вверх появляется.
Все работает, как и задумывалось, но при тестировании на устройствах iphone, возникает следующая проблема:

Если скроллить вверх он появляется, все работает, но при достижении верха страницы он опять пропадает, хотя должен фиксироваться. После перезагрузки страницы, он опять появляется

На остальных устройствах, работает, как положено все.

код JS:

<script>
    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 = "-70px";
      }
      prevScrollpos = currentScrollPos;
    }
</script>

Как исправить данную проблему?

Answer 1

Дело в том, что на устройствах ios, когда вы достигаете верха страницы, скролл можно продолжить еще на несколько условных em. Конечно после того, как вы отпустите скролл, страница вернётся в исходное положение автоматически, в связи с чем условие продолжить выполняться, без учёта этого момента.

КОД С РЕШЕНИЕМ:

var scrollTop = $(window).scrollTop();
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 = "-70px";
    }
    prevScrollpos = currentScrollPos;
    if (scrollTop == currentScrollPos) {
        document.getElementById("navbar").style.top = "0";
    }
}

БЛОГ НА HUSL

Скролл JavaScript

Ответы (1 шт):