@qqignatqq

Константа, чё она рыпается?

Здравствуйте... Мужики, я сейчас плакать уже начну.

Не очень важное предисловие
Есть кастомная прокрутка для сайта. Работает так: считывает дефолтную прокрутку и двигает весь сайт на это расстояние, но уже плавно. А весь сайт это время находится в 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

Вопрос
ГДЕ Я ОШИБСЯ?
И что нужно написать, шоб оно работало?
  • Вопрос задан
  • 455 просмотров
Пригласить эксперта
Ответы на вопрос 1
После этого const topka = elem.getBoundingClientRect().top; вставь консоль лог и глянь.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы