Как сделать липкий элемент через position: fixed?

Question

[Esm322]

Подскажите, пожалуйста, мне нужно сделать липкий заголовок, чтобы он опускался до границы списка, а затем переставал быть липким. Пробовал sticky.js использовать, но библиотека работает некорректно. Решил поробовать написать сам. В итоге возник вопрос, почему в ивенте скролл эти 2 кода выдаёт всегда false, хотя они всегда достигают верхней границей этого элемента stickyTitle. Соответственно, добавление класса к элементу не срабатывает

window.scrollY === stickyTitle.getBoundingClientRect().height

document.documentElement.scrollTop === stickyTitle.getBoundingClientRect().height

Весь ивент полностью:

window.addEventListener('scroll', () => {
  console.log(window.scrollY === stickyTitle.getBoundingClientRect().height);
  console.log(document.documentElement.scrollTop === stickyTitle.getBoundingClientRect().height);

  if (document.documentElement.scrollTop === stickyTitle.getBoundingClientRect().height) {
    stickyTitle.classList.add('sticky')
  }
})

Класс для липкого заголовка:

.sticky {
  position: fixed;
  left: 205px;
  top: 120px;
  width: 37%;
}

В чём может заключаться проблема?

Comments

[DIVSIDE]

Где html? Где другой css?

Answer 1

[Сергей delphinpro]

Предположу, что событие скролла не вызывается на каждый проскролленный пиксель. А значит ваш код просто "проскакивает" нужную точку. Используйте сравнение >= или <=, в зависимости от вашей логики.

Comments

[Esm322]

Большое спасибо. Даже в голову не пришло, что он пропускает пиксели. Очень сильно помогли