0

Сделал навбар, которой при прокрутке вниз пропадает, при прокрутке вверх появляется.
Все работает, как и задумывалось, но при тестировании на устройствах 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>

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

1 ответ 1

0

Дело в том, что на устройствах 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";
    }
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.