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

Question

[del993788]

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

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

Вопрос
ГДЕ Я ОШИБСЯ?
И что нужно написать, шоб оно работало?

Comments

[Михаил]

Выведите в консоль переменную и посмотрите

503.23529052734375
-3.283738374710083
503.23553466796875
-3.283433198928833
503.23565673828125
-3.283128023147583
503.23590087890625
-3.283066987991333
503.236083984375
-3.282944917678833
503.2362060546875
-3.282639741897583
503.236328125

[Михаил]

scroller.y у вас как я понял это отступ скрола сверху
getBoundingClientRect().top вернёт координаты относительно окна
gsap.set(elem, {y: scroller.y - topka}); а тут вы каждый раз перемещаете этот элемент

вам нужно брать позицию элемента относительно его корня (body)
https://jsfiddle.net/5L6kqr8f/

1. google > js offset to root

примерно так

function getOffsetTop(elem) {
  var s = 0;
  do {
    if (!isNaN(elem.offsetTop)) {
      s += elem.offsetTop;
    }
  } while ((elem = elem.offsetParent));
  return s;
}

2.
const topka = getOffsetTop(elem);

// что за topka вообще?

3.

else if (scroller.y > topka) {
  gsap.set(elem, {
    y: scroller.y - topka,
  });
}

[del993788]

а я позицию относительно чего получаю? elem.getBoundingClientRect().top; мне возвращает циферку. почему эта циферка сходит с ума?

Answer 1

[Владимир]

После этого const topka = elem.getBoundingClientRect().top; вставь консоль лог и глянь.

Comments

[del993788]

Я видел, но ведь константа на то и константа, что она постоянная. А здесь она будто об этом не знает

[Владимир]

qqignatqq, Тебе азы почитать нужно.
Констатнта она для того, чтобы ты ниже по коду topka = somethingelse не сделал, а так она себя правильно ведет, ты ее присваиваешь заново на каждой итерации stickyElems.forEach