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

Question

[Mark]

Добрый день! У меня есть вопрос. Как сделать, чтобы при скролле вниз блок появлялся, а при скролле вверх исчезал

Answer 1

[eternalfire]

function debounce(func, wait = 10, immediate = true) {
      let timeout;
      return function() {
        let context = this, args = arguments;
        let later = function() {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      };
    };

    let scrollPos = 0;
    const nav = document.querySelector('.site-nav');

    function checkPosition() {
      let windowY = window.scrollY;
      if (windowY < scrollPos) {
        nav.classList.add('is-visible');
        nav.classList.remove('is-hidden');
      } else {
        nav.classList.add('is-hidden');
        nav.classList.remove('is-visible');
      }
      scrollPos = windowY;
    }
    window.addEventListener('scroll', debounce(checkPosition));

Answer 2

[Mark]

Можете пожалуйста сбросить ссылку на Codepen, или что-то подобное?

Comments

[eternalfire]

сбросил

[Mark]

eternalfire, спасибо