Как элементу со свойством fixed, добавить затухание по мере скроллинга вниз?

Question

[Шигаев.]

Есть div наверху страницы со свойством display: fixed. При скроллинге страницы вниз, ему полагается оставаться на месте и затухнуть до исчезновения. Понимаю, что решается через js + css. Но, я так и не нашёл подходящего примера. Похожие были, но всегда что-то шло не так :)) С параметрами времени затухания постараюсь разобраться сам.
Спасибо!

Comments

[Николай]

Так Вы покажите Ваши старания, а то так можно Вам ответить только, что слушайте событие scroll страницы и меняйте opacity по своей формуле у шапки.

[Шигаев.]

Николай, например так:
codepen.io/anton-shigaew/pen/poYxxxz

С прокруткой страницы вниз, картинка остаётся на месте и постепенно затухает до полной прозрачности.

Answer 1

[batowski]

function setOpacityOnScroll(className, scrollThreshold) {
  var elements = document.getElementsByClassName(className);

  Array.from(elements).forEach(function(element) {
    window.addEventListener('scroll', function() {
      // Получаем значение прокрутки страницы
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

      // Вычисляем значение прозрачности в зависимости от прокрутки страницы
      var opacity = 1 - (scrollTop / element.offsetHeight);

      // Ограничиваем значение прозрачности от 0 до 1
      opacity = Math.max(0, Math.min(1, opacity));

      // Устанавливаем значение прозрачности элемента
      element.style.opacity = opacity.toString();

      // Если прокрутка превысила пороговое значение, устанавливаем прозрачность 0
      if (scrollTop >= scrollThreshold) {
        element.style.opacity = '0';
      }
    });
  });
}

// Пример использования функции
setOpacityOnScroll('fixed-element', 500);

Наверно, что типо того

Comments

[Шигаев.]

Огромное!
Всё работает.