Как элементу со свойством fixed, добавить затухание по мере скроллинга вниз?
Есть div наверху страницы со свойством display: fixed. При скроллинге страницы вниз, ему полагается оставаться на месте и затухнуть до исчезновения. Понимаю, что решается через js + css. Но, я так и не нашёл подходящего примера. Похожие были, но всегда что-то шло не так :)) С параметрами времени затухания постараюсь разобраться сам.
Спасибо!
Дополнительно:
Так Вы покажите Ваши старания, а то так можно Вам ответить только, что слушайте событие scroll страницы и меняйте opacity по своей формуле у шапки.
codepen.io/anton-shigaew/pen/poYxxxz
С прокруткой страницы вниз, картинка остаётся на месте и постепенно затухает до полной прозрачности.
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); |
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);
Наверно, что типо того
- Огромное!
Всё работает.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для добавления эффекта затухания по мере прокрутки страницы вниз к элементу с фиксированным позиционированием, можно использовать CSS свойство opacity и JavaScript для обработки события прокрутки страницы.
Вот пример кода, который позволит вам добавить этот эффект к элементу с классом "fixed-element":
```html
.fixed-element {
position: fixed;
top: 0;
left: 0;
opacity: 1;
transition: opacity 0.3s ease;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
window.addEventListener('scroll', function() {
var element = document.querySelector('.fixed-element');
var scrollPosition = window.scrollY;
if (scrollPosition > 100) {
element.style.opacity = 0.5;
} else {
element.style.opacity = 1;
}
});
```
В данном примере, при прокрутке страницы на 100px и более вниз, у элемента с классом "fixed-element" будет устанавливаться прозрачность 0.5, что создаст эффект затухания. При прокрутке страницы вверх, прозрачность элемента будет возвращаться к 1.
Вы можете настроить значение прозрачности и скорость анимации, изменяя соответствующие значения в CSS и JavaScript.