Как сделать чтобы один элемент был прилеплен, пока второй скролится(css/jquery)?

Чтобы прилепить один элемент, пока другой прокручивается, вы можете использовать CSS или jQuery. Вот примеры обоих вариантов:

1. Используя CSS:

Для прилепления элемента можно использовать CSS свойство position: sticky;. Однако, это свойство работает только для элементов, которые находятся внутри контейнера с установленной высотой. Например:

HTML:

<div class="container">
  <div class="sticky-element">Этот элемент будет прилеплен</div>
  <div class="scrolling-element">Этот элемент будет скроллироваться</div>
</div>

CSS:

.container {
  height: 300px; /* Задаем высоту контейнера */
  overflow-y: scroll; /* Включаем вертикальный скроллинг */
}

.sticky-element {
  position: sticky;
  top: 0;
  background-color: yellow;
}

.scrolling-element {
  height: 500px; /* Устанавливаем высоту прокручиваемого элемента */
  background-color: blue;
}

2. Используя jQuery:

Для более гибкой настройки липкого элемента, вы можете использовать jQuery и JavaScript. Вот пример с использованием jQuery:

HTML:

<div class="container">
  <div class="sticky-element">Этот элемент будет прилеплен</div>
  <div class="scrolling-element">Этот элемент будет скроллироваться</div>
</div>

CSS:

.container {
  height: 300px; /* Задаем высоту контейнера */
  overflow-y: scroll; /* Включаем вертикальный скроллинг */
}

.sticky-element {
  background-color: yellow;
  position: absolute; /* Переключаем позиционирование на абсолютное */
}

.scrolling-element {
  height: 500px; /* Устанавливаем высоту прокручиваемого элемента */
  background-color: blue;
}

Javascript (используя jQuery):

$(document).ready(function() {
  var offsetTop = $('.sticky-element').offset().top;

  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    
    if (scrollTop >= offsetTop) {
      $('.sticky-element').addClass('sticky');
    } else {
      $('.sticky-element').removeClass('sticky');
    }
  });
});

CSS:

.sticky {
  position: fixed;
  top: 0;
}

Как видно из примеров, вы можете использовать либо CSS свойство position: sticky;, либо jQuery для достижения этого эффекта. Выбор зависит от ваших потребностей и совместимости с браузерами.