Nie wiem do końca czy o taki efekt Tobie chodzi, ale ustaw zdarzenie na okno "wykrywające" użycie kółka myszki a za pomocą deltaY sprawdź kierunek obrotu, np.
[ on-line ]
const serviceInfoElFirstSection = $('.service-info-content--first .service-info-el');
$(window).on('wheel', function(event) {
if (event.originalEvent.deltaY > 0) {
serviceInfoElFirstSection.animate({
top: '0vh',
}, 1000);
} else {
serviceInfoElFirstSection.animate({
top: '50vh',
}, 1000);
}
});
lub za pomocą css transition
[ on-line ]
.service-info-el {
position: relative;
top: 50vh;
width: 18vw;
transition: top 1000ms;
}
.wheel-up {
top: 0vh;
}
const serviceInfoElFirstSection = $('.service-info-content--first .service-info-el');
$(window).on('wheel', function(event) {
for (const section of serviceInfoElFirstSection)
if (event.originalEvent.deltaY > 0)
section.classList.add('wheel-up');
else
section.classList.remove('wheel-up');
});
Chcę uzupełnić to zdarzenie, gdy przewinę zawartość w dół o 150px
sprawdź
- window.pageYOffset [ 1 ] [ 2 ]
- document.documentElement.scrollTop [ 1 ] [ 2 ]
[ on-line ]
const scrollTop = (window.pageYOffset !== undefined) ?
window.pageYOffset :
(document.documentElement || document.body.parentNode || document.body).scrollTop;
console.info(scrollTop);