Как при прокрутке прилепить div к верху?

Question

[helloitsme]

Нужно, чтобы при прокрутке вниз основного текста, блок fixed был сверху, а при поднятии вверх все вернулось на свои места.
jsfiddle.net/mortyyy/k8a9je12/9

Как можно это можно реализовать?

Answer 1

[jlekapb]

Как-то так: jsfiddle.net/k8a9je12/20
Лучше, конечно, не инлайново стили задавать, а создать два класса: static и fixed.

jQuery(function($) {
  function fixDiv() {
    var $cache = $('#fixed');
    if ($(window).scrollTop() > 50)
      $cache.css({
        'position': 'fixed',
        'top': '0px'
      });
    else
      $cache.css({
        'position': 'relative',
      });
  }
  $(window).scroll(fixDiv);
  fixDiv();
});

Comments

[y0u]

Как автоматически определить границу экрана, а не через "> 50"?

[Александр Медведев]

y0u ну померять отступ, например так $('.navbar').position().top

Answer 2

[Ilya Korablev]

.fixed{
Position: fixed;
}

Не?

Answer 3

[igoryag2000]

Нашла именно то решение, которое мне и хотелось, и хочу оставить это знание здесь, чтобы другие люди его быстрее находили при поиске.

https://webref.ru/course/position/sticky

div {
position: sticky; /* Липкое позиционирование */
top: 0; /* Положение сверху */
}