Как сделать динамичный header?

Question

[mindx]

Очень часто вижу, что на многих сайтах после прокрутки страницы header в котором навигация position: fixed, но при этом сам header меняется в размерах.
Те если в нормальном состоянии он 50px, то после прокрутки он +-25px.
Как сделать такой header? Как я понимаю, нужен новый стиль, но как сделать правило, что после прокрутки он будет изменяться?

Answer 1

[Максим]

window scroll function header addClass fixed
где мы получим верхнюю точку и ту точку откуда он получит нужный class
ну и в .fixed описать как он будет выглядеть после того как получит этот class

$(window).scroll(function() {

    if ($(this).scrollTop() > 1){  

        $('header').addClass("fixed");

    }  else{

        $('header').removeClass("fixed");
    }

});

но с css3 появилось новое свойство position:sticky; но работает так себе из за поддержки

Comments

[mindx]

Те изначально у него нет position: fixed?

[Василий Варюхин]

window scroll function header addClass fixed

ES10? :D

[Максим]

mindx, https://codepen.io/topicstarter/pen/NYemoe вот смотри - сделал точно как написал тебе

Answer 2

[Олег]

https://learn.javascript.ru/onscroll

Answer 3

[leni_m]

на javascript примерно так: если прокрутили на 50 px сверху, то заменяем на новый хедер.