Идея такова - при скролле хочу чтобы верхняя часть хедера с логотипом уезжала за экран, а нижняя приклеивалась к верху страницы. Частично это я решил, но вылезла проблема: нижняя часть с меню (#name) прилепает к верху мгновенно (через изменнеие классов в JS), а вот верняя часть уезжает медленее вместе со скроллом. Попробуйте медленно поскролить (только не колесиком мышки), будет понятно о чем я. Так вот, как лучше мне поступить? Вижу 2 варианта:
1. Убирать верхнюю часть также в JS по скроллу, например display: none (или как лучше?). Проблема в том, что у меня не получается задать 2 правила, и для верхней и для нижней части хедера (все ломается, когда я просто делаю дупликать текущего кода, и изменяю id и class)
2. Вообще все переделать и сделать так: обе части хедера поднимаются со скролом, но когда нижняя часть (#name) достигает верха страницы, то она "прилипает". Это конечно предпочтительный вариант, но я не знаю как его реализовать совсем (плагины для jQuery не хочу использовать принципиально).
codepen.io/dhatt/pen/GjjYQw 
Простой
