Скрытие и раскрытие объектов с помощью JavaScript pageYOffset

Довольно давно я занимался клонированием сайта и наткнулся на что-то незнакомое. Мне потребовалось некоторое время, чтобы понять, на что именно я смотрю. На сайте была панель навигации, и эта панель скрывалась, когда вы прокручивали страницу вниз, и показывалась, когда вы прокручивали вверх. Странно!

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

.nav-bar{
display:hidden;
}

Скрытый дисплей был моей первой догадкой, но я быстро понял, что он полностью скрывает панель навигации (без возврата). Я подумал еще немного и пришел к выводу, что это как-то связано с JavaScript, потому что я полагал, что это может вызвать функцию, которая может выполняться, если выполняется условие. Условие заключалось в том, что если я прокручиваю страницу вниз, то навигационная панель должна быть скрыта или, в противном случае, продолжать отображаться. Чтобы углубить это объяснение, можно привести пример. Джимми хочет шоколадку, но мать не дает ему ее. Шоколад находится в кухонном шкафу. Джимми может получить шоколадку только в том случае, если он проберется на кухню без ведома мамы и возьмет ее оттуда. Если мамы нет дома, он может тихонько пробраться на кухню. Но если она все-таки зайдет на кухню, то он должен быстро спрятаться за кухонной стойкой.

Во-первых, давайте добавим слушатель событий. Метод слушателя событий позволяет JavaScript постоянно следить за браузером, чтобы увидеть, выполняются ли определенные условия (в объявленной вами функции). В данном случае мы хотим, чтобы JavaScript слушал событие прокрутки. Я назвал свою функцию scrollDown, потому что условия, которые я перечислю ниже, действуют только при прокрутке вниз.

window.addEventListener("scroll", scrollDown);
/* 'e' parameter stands for event */
function scrollDown(e) {
    let navigation = document.getElementById("nav-bar");
    if(window.pageYOffset > 500){
        navigation.style.display = "none";
    }
    else{
        navigation.style.display = "block";
    }
}

Начнем с объявления навигационной переменной, которая получит идентификатор из вашего html, чтобы Js знал, на что вы ссылаетесь. Во-вторых, мы будем ссылаться на ось Y, поскольку мы прокручиваем страницу вертикально. JavaScript называет это pageYOffset. Итак, если pageYOffset больше 500px, то скройте навигацию. Если условие ложно, то покажите ее снова. Код работает, но только наполовину. Нам нужно поработать над второй половиной, той частью, когда мы прокручиваем страницу вверх. Проблема в том, что когда мы прокручиваем страницу вверх, панель навигации больше не появляется.

window.addEventListener("scroll", scrollUp);

function scrollUp(e) {
    let navigation= document.getElementById("nav-bar");
    if(window.pageYOffset <500){
        navigation.style.display = "block";
    }
    else{
        navigation.style.display = "none";
    }
}

Теперь, когда код работает, идите и развлекайтесь с ним. Возможно, вы сможете менять слова заголовка по мере прокрутки вниз. Или изменить цвет панели навигации при прокрутке.

Спасибо за чтение!