Следование элемента при скроле

Question

Пожалуйста помогите реализовать, чтобы при скролинге страницы контейнер был закреплен, а при достижения следующего блока контейнер останавливался.

Answer 1

Думаю вам подойдет position: sticky. Вот пример:

.content {
  position: relative;
}

.dummy {
  height: 200px;
}

.wrapper {
  position: absolute;
  height: 1000px;
}

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  background-color: lime;
  top: 100px;
  width: 100px;
  height: 20px;
}

<div class="content">
  <div class="wrapper">
    <div class="sticky"></div>
  </div>
  <div class="dummy">qwerty</div>
  <div class="dummy">qwerty</div>
  <div class="dummy">qwerty</div>
  <div class="dummy">qwerty</div>
  <div class="dummy">qwerty</div>
  <div class="dummy">qwerty</div>
  <div class="dummy">qwerty</div>
  <div class="dummy">qwerty</div>
</div>

БЛОГ НА HUSL

Следование элемента при скроле

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