Как определить, когда блок закрепился?

Question

речь о .block

суть - как доскролили - поменять цвет (как пример) с оранжевого на зеленый

header {
  position: fixed;
  width: 100%;
  top: 0px;
  background-color: red;
}

header+section {
  padding-top: 50px;
}

.block {
  position: sticky;
  top: 50px;
  background-color: orange;
}

<header>
  <p>header</p>
</header>

<section>
  0Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur harum, qui labore, dolor mollitia magnam modi illum recusandae voluptate deserunt, in ipsum, corporis adipisci! Minus deleniti, numquam nobis cumque ratione?
</section>

<p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p class="block">Закреплящий блок (блок переходов)</p>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

Answer 1

Самое простое (но не самое изящное) решение - прослушивать событие scroll, и выставлять элементу класс по условию определенной позиции относительно вьюпорта:

const block = document.querySelector('.block');
window.addEventListener('scroll', () => {
  const { top } = block.getBoundingClientRect();
  block.classList.toggle('is-fixed', top === 50); 
});

header {
  position: fixed;
  width: 100%;
  top: 0px;
  background-color: red;
}

header+section {
  padding-top: 50px;
}

.block {
  position: sticky;
  top: 50px;
  background-color: orange;
}

.block.is-fixed { background-color: lime; }

<header>
  <p>header</p>
</header>

<section>
  0Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur harum, qui labore, dolor mollitia magnam modi illum recusandae voluptate deserunt, in ipsum, corporis adipisci! Minus deleniti, numquam nobis cumque ratione?
</section>

<p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p class="block">Закреплящий блок (блок переходов)</p>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

Здесь условием является значение верхней координаты элемента - оно становится 50 когда блок "прилипает" (это высота header'а, по сути, хоть и заданная стилевым свойством top самого блока).

Недостатки такого решения:

критерий изменения класса приходится хардкодить (то есть, "приколачивать гвоздями" к коду и стилям), самостоятельно он не подстраивается под внешние условия.
// можно сверять координату с getComputedStyle(block).top вместо константы 50, но это по-прежнему хардкод значения (пусть и только в стилях, при таком варианте)
высокая нагрузка на железо, т.к. событие скролла при прокрутке возникает очень часто (и код обработчика выполняется огромное количество раз, напрягая процессор). Критично для мобильных устройств.
// в целом решается применением паттерна кода throttle (ограничением частоты вызовов обработчика по заданному интервалу времени), но он естественно усложняет решение

Answer 2

Для таких целей надо использовать IntersectionObserver, а не scroll ивент. Код очень прост. Меняем цвет как только элемент с классом sentinal уйдет на 1 пиксель с области видимости.

const stickyBlock = document.querySelector('.block');

const observer = new IntersectionObserver(([entry]) => stickyBlock.classList.toggle('sticked', entry.intersectionRatio !== 1));

observer.observe(stickyBlock.querySelector('.sentinal'));

header {
  position: fixed;
  width: 100%;
  top: 0px;
  background-color: red;
}

header+section {
  padding-top: 50px;
}

.sentinal {
  top: -51px; /* на один пиксель больше чем значение top в block */
  position: absolute;
}

.block {
  position: sticky;
  top: 50px;
  background-color: orange;
}

.sticked {
  background-color: green;
}

<header>
  <p>header</p>
</header>

<section>
  0Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur harum, qui labore, dolor mollitia magnam modi illum recusandae voluptate deserunt, in ipsum, corporis adipisci! Minus deleniti, numquam nobis cumque ratione?
</section>

<p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p class="block"><span class="sentinal"></span>Закреплящий блок (блок переходов)</p>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis soluta placeat, ut totam accusantium. Quam quidem, soluta autem accusamus dolores, quibusdam assumenda architecto neque doloribus esse beatae. Perferendis, quos, eum!</p>

БЛОГ НА HUSL

Как определить, когда блок закрепился?

Ответы (2 шт):