Как реализовать блок прилипающий к верху страницы при ее прокрутке?

Question

[Григорий Дидус]

Здравствуйте! Подскажите пожалуйста решение данной задачи или дайте пример кода:

Блок (обведен черным) при прокрутке страницы должен подняться к верху страницы (место обведено красным) и при подальшей прокрутке там оставаться.

Answer 1

[Viktor Vsk]

В 3 простых шага:
1. Делаете так, чтобы блок всегда прилипал к верху страницы: position: fixed
2. Отслеживаете нужное событие (например, проверяя расстояние до верха страницы при скролле:

$(window).on('scroll', function(){ if ( $(window).offset.top > 200){ console.log("> 200"); })

3. При выполнении условия из пункта 2 добавлять класс из пункта 1 к нужному элементу $('selector').addClass('fixed');

Comments

[Григорий Дидус]

Спасибо! На редкость хороший адекватный ответ.

[Григорий Дидус]

У Вас опечатка в :$(window).on('scroll', functon().

[Viktor Vsk]

Григорий Дидус: Да, спасибо