Меню при скролле — как лучше сделать?

Question

[dhat]

Идея такова - при скролле хочу чтобы верхняя часть хедера с логотипом уезжала за экран, а нижняя приклеивалась к верху страницы. Частично это я решил, но вылезла проблема: нижняя часть с меню (#name) прилепает к верху мгновенно (через изменнеие классов в JS), а вот верняя часть уезжает медленее вместе со скроллом. Попробуйте медленно поскролить (только не колесиком мышки), будет понятно о чем я. Так вот, как лучше мне поступить? Вижу 2 варианта:

1. Убирать верхнюю часть также в JS по скроллу, например display: none (или как лучше?). Проблема в том, что у меня не получается задать 2 правила, и для верхней и для нижней части хедера (все ломается, когда я просто делаю дупликать текущего кода, и изменяю id и class)

2. Вообще все переделать и сделать так: обе части хедера поднимаются со скролом, но когда нижняя часть (#name) достигает верха страницы, то она "прилипает". Это конечно предпочтительный вариант, но я не знаю как его реализовать совсем (плагины для jQuery не хочу использовать принципиально).

codepen.io/dhatt/pen/GjjYQw

Answer 1

[Андрей Верх]

Так?

Comments

[dhat]

ДА, это отличный вариант, спасибо огромное, сейчас сяду изучать как вы это сделали)) Правда текст с контентом немного дергается при скролле. Надеюсь получится исправить это?

[dhat]

Не понимаю почему в момент прилепливания меню к верху дергается текст. То ли сбрасывается высота, то ли еще что-то. Вообщем, загадочный код какой-то :((

[Игорь Морев]

dhat: Потому вы задаёте блоку position: fixed, а это свойство выносит блок из контекста и высота body меняется. Оберните этот блок в другой и задайте ему фиксированную высоту.

[AlexRas]

dhat: можно так исправить: .red + .content { margin-top: 36px; }

[dhat]

Спасибо, исправил все.