Есть блок контейнер parallax__cont (релатив,с заданым z-index)
Есть стики-блок (который при загрузке страницы не стики :-), абсолют, задана позиция top и z-index меньше чем у контейнера).
Высота контейнера не фиксированная. В контейнере могут быть и другие дочерние блоки.
Мне нужно, чтобы при скролле стики-блок начинал плавать (менялась позиция на fixed), а когда при прокрутке страницы этот стики-блок чуть выходил за пределы контейнера parallax__cont снизу (например на 30px или rem) он "останавливался" ( позиция fixed менялась на absolute, задавался отступ уже bottom) и блок уходил вверх при скроллинге...
Нашел здесь такой код. Это почти то, что мне нужно.
https://javascript.ru/forum/events/7...ok-sticky.html
Задал у себя два класса is-active и is-bottom (с отрицательным значением bottom).
Переделал его под свои нужды+добавил проверку наличия класса is-active.
var PARRALAX_CONTAINER_HEIGHT_AND_BOTTOM = document.getElementsByClassName("parallax__cont") + 30;
var PAGE_WITHOUT_BOTTOM = (document.body.scrollHeight - PARRALAX_CONTAINER_HEIGHT_AND_BOTTOM);
var el = document.querySelector('.parallax__back');
var parentEl = document.querySelector('.parallax__cont');
window.addEventListener('scroll', function(){
if(window.pageYOffset > parentEl.offsetTop) {
if ( el.classList.contains('is-active') != true ) {
el.classList.add('is-active');
}
if(window.pageYOffset > PAGE_WITHOUT_BOTTOM) {
el.classList.remove('is-active');
el.classList.add('is-bottom');
}
} else {
el.classList.remove('is-active');
}
})
PARRALAX_CONTAINER_HEIGHT_AND_BOTTOM - вычисляю высоту контейнера в котором должен "парить" стики-блок и добавляю к высоте 30 пикселей, чтобы блок чуть выходил за пределы контейнера при скроле.
PAGE_WITHOUT_BOTTOM - вычисляю значение высоты страницы при котором стики-блок должен переставать "парить" и интегрировался обратно в страницу.
Сейчас при скролле блок приклеивается, но. Класс is-active не удаляется при скролле до конца страницы.
Класс is-bottom не присваивается
Стики-блок, соответственно, не отлипает и "парит" при скроле до конца страницы...