Как сделать sticky header, что он появлялся при прокрутке?

Question

[HelenaS]

Добрый день!

Есть LP, первый блок на нем статичен, после него при прокрутке должен появлятся хедер. Плагины которые я видела, просто перемещают уже видимый хедер, мне же нужно что он именно появлялся при прокрутке.
Кто-нибудь видел как это можно реализовать или готовый плагин?

Заранее спасибо за помощь)

Answer 1

[Игорь]

Практически тоже что написал SergZay только с отдельным классом, потом просто проще настаивать под разные разрешения, если планируется оптимизация под все экраны

$(window).scroll(function() {
                var top = $(document).scrollTop();
                if (top < 300) $(".top_nav").removeClass('fixed');
                else $(".top_nav").addClass('fixed');
            });

.fixed{
position: fixed;
//дополнительные стили
}

Answer 2

[SergZay]

$(window).scroll(function() {
                var top = $(document).scrollTop();
                if (top < 300) $(".top_nav").css({top: '0', position: 'relative'});
                else $(".top_nav").css({top: '64px', position: 'fixed'});
            });

Я использую такой код

Comments

[HelenaS]

Спасибо огромное!)))

[Serj-One]

HelenaS: Советую воспользоваться советом Игорь, и работать с классами, а не стилями напрямую. Изменение стилей через js - дурной тон.

Answer 3

[Clever_Coyote]

jsfiddle.net/Affiction/7LgkpwL8