Как при скролле до определенного блока показывать фиксированный блок?

Question

[z_u_q]

Здравствуйте. Как сделать так, чтобы фиксированная шапка была не постоянно, а появлялась только, когда дохожу до блока .block? Как такое реализовать? Возможно есть какие-то примеры реализаций. Спасибо!

Ссылка на пример

Answer 1

[sinneren]

У шапки ставить position:sticky \ fixed когда дошли до блока .block.
А на js узнавать это

$(document).scroll(function () {
    if ($(this).scrollTop() <= ($(".block").offset().top - $(window).height())) {
       //sticky
    } else {
        //not sticky
    }
}

Comments

[z_u_q]

Спасибо большое, Ваше решение отчасти помогло мне. Только не совсем понятно, как мне вычислить окончание блока, чтобы убрать шапку, чтобы у следующего блока шапка не показывалась. Смоделировал тут: пример

[sinneren]

z_u_q, у .block есть высота, её и брать вместе с $(".block").offset().top в расчёт и сравнивать >=