Здравствуйте... Мужики, я сейчас плакать уже начну.
Не очень важное предисловие
Есть кастомная прокрутка для сайта. Работает так: считывает дефолтную прокрутку и двигает весь сайт на это расстояние, но уже плавно. А весь сайт это время находится в position:fixed. Разумеется внутри сайта position fixed и position sticky не работают, хотя последний мне и нужен.
Суть
Я пытаюсь реализовать position sticky через JS, но ПОЧЕМУ-ТО (!!!), когда значения положения блока находятся В КОНСТАНТЕ, ТО ЭТОТ ЗАФИКСИРОВАННЫЙ БЛОК ДЁРГАЕТСЯ, но если я ему в ЛОБ пропишу значение (ПРЯМ ЦИФРАМИ), то ПОЧЕМУ-ТО (WTF?!) НИ-ЧЕ-ГО НЕ ТРЯСЁТСЯ!
Проблема в этом куске кода
stickyElems.forEach(elem => {
const topka = elem.getBoundingClientRect().top;
const y = gsap.getProperty(elem, "y");
const wheight = document.documentElement.clientHeight;
if (y >= elem.parentNode.clientHeight - elem.clientHeight &&
elem.parentNode.getBoundingClientRect().top + scroller.y + elem.parentNode.clientHeight - elem.clientHeight <= scroller.y) {
gsap.set(elem, {y: elem.parentNode.clientHeight - elem.clientHeight});
console.log('Фиксация внизу')
} else if (topka <= 0 || y > 0) {
gsap.set(elem, {y: scroller.y - topka});
console.log('ЕДЕТ')
} else {
gsap.set(elem, {y: 0});
console.log('Блок находится в начале.')
}
});
Беда в константе topka, а именно в строчке gsap.set(elem, {y: scroller.y - topka});
Она назначается в начале и устанавливается в размере положения самого элемента. К примеру (!) это значение равно 500. Вот если прописать заместо topka именно gsap.set(elem, {y: scroller.y - 500});, то на моё удивление всё будет нормально работать. Ля, ну это лучше видеть)
Вот вам вариант с психованным блоком:
https://jsfiddle.net/w6c2jz4L/2
А вот нормальный
https://jsfiddle.net/w6c2jz4L/3
Вопрос
ГДЕ Я ОШИБСЯ?
И что нужно написать, шоб оно работало?
