Как зафиксировать блок (div) при прокрутке вниз?

Программирование
,
#1

Необходимо при прокрутке прижать блок в верх странице.
Пробую position sticky - не работает. Какие могут быть варианты?

7 симпатий
#2

Попробуйте проверенным способом (добавляет свойство) при прокрутке:

JS

$(document).ready(function(){
	$nav = $('.sidebar');
	$nav.css('width', $nav.outerWidth());
	$window = $(window);
	$h = $nav.offset().top;
	$window.scroll(function(){
		if ($window.scrollTop() > $h) {
			$nav.addClass('fixed');
		} else {
			$nav.removeClass('fixed');
		}
	});
});

CSS

.sidebar.fixed  {
    position: fixed; 
    top: 12px;
}

А position: sticky; работает только внутри родителя и прекращает работать до окончания высоты родителя.

9 симпатий
#3

Если элемент с position: sticky является единственным ребёнком своего родителя-обёртки, то этот «липкий» элемент не залипает.

<!-- НЕ РАБОТАЕТ!!! -->
<style>
  .sticky {
    position: sticky;
    top: 0;
  }
</style><div class="wrapper">
  <div class="sticky">
     Некий контент
  </div>
</div>

Когда я добавлял больше элементов внутрь родителя-обёртки всё начинало работать как ожидалось.

8 симпатий