Я использую некоторые акции 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"
Я даже близко к тому, как это должно быть написано?