@slagoris

Модернизация кнопки «наверх». Как реализовать скрытие кнопки при скролле?

Добрый день.
Есть кнопка наверх на JavaScript. Написать ее написал когда-то, а появилась задача написать два варианта ее показа/скрытия. Сейчас кнопка появляется, при превышении определенного значения pageYOffset. И убирается так же, при возврате в нужную зону. А вот что необходимо реализовать:
-- Кнопка появляется, как обычно, при превышении установленного значения pageYOffset, а затем, через несколько секунд исчезает при отсутствии скролла. И заново появляется при любом скролее, при нахождении значений pageYOffset, в котором она должна быть.
-- А второй вариант отличается от первого только тем, что кнопка, после того, как скрылась, появлялась при при скролле на определенное количество значений pageYOffset.
Не судите строго. Только начал учиться JS, а нагуглить не смог.
(function() {
  'use strict';

  var goTopBtn = document.querySelector('.back_to_top');
  function trackScroll() {
    let scrolled = window.pageYOffset;
    let coords = document.documentElement.clientHeight;

    if (scrolled > coords) {
      goTopBtn.classList.add('back_to_top-show');
    }
    if (scrolled < coords) {
      goTopBtn.classList.remove('back_to_top-show');
    }
  }

  function backToTop() {
    if (window.pageYOffset > 500) {
      window.scrollBy(0, -40);
      setTimeout(backToTop, 0);
    }
  }
  window.addEventListener('scroll', trackScroll);
  goTopBtn.addEventListener('click', backToTop);
})();
  • Вопрос задан
  • 331 просмотр
Решения вопроса 1
Benzin102
@Benzin102
Shitcoder
По первому пункту как-то так можно
https://jsfiddle.net/koj1p2q5/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы