Как добавить навигацию в header чтобы при скроле менялость положение?

Question

[Toy Boy]

Есть такой хедер, под лого навигация (красные линии) и справа какой-то блок (желтый). Как сделать при прокрутке вниз навигация посередине была, а блок скрылся.

Comments

[Evgeniy]

Можно сверстать два блока и обоим поставить display: none;.
Первому задать класс active, у которого display: block;
При прокрутке:
- добавить класс active второму блоку, он уберёт display: none; на другой свойство
- убрать класс active у первого блока

Например так

[Максим]

я переделовать не буду - смотри в общем : https://codepen.io/topicstarter/pen/yLgOjYw

[Toy Boy]

Максим Ленский, зачем мне бургер меню?

[Toy Boy]

Evgeniy, попробую, спасибо

[Максим]

Toy Boy, значит я не понял - извени

[Toy Boy]

Evgeniy, например как?...

Answer 1

[DivineDraft]

1. Размещаете меню и блок на страницу в статичное положение, куда требуется
2. Добавляете скрипт на jQuery, который добавляет класс к шапке при прокрутке. Или же добавьте новые свойства для вашего, который меняет шапку сейчас.

jQuery(function($) {
 $(window).scroll(function(){
 if($(this).scrollTop()>185){
 $('.app-header').addClass('app-header--active');
 }
 else if ($(this).scrollTop()<185){
 $('.app-header').removeClass('app-header--active');
 }
 });
 });

3. Настраиваете CSS, как требуется через новый установленный класс, к примеру:

.app-header--active .menu {float:right;}
.app-header--active .block {display:none;}

Comments

[Toy Boy]

я не очень шарю в джава. можно в codepen с моим примером ?

[DivineDraft]

Toy Boy,
Как-то так можно даже

[Toy Boy]

Спасибо большое! Плюс карме.

[Toy Boy]

DivineDraft, а как в JS сделать проверку шапки при обновлении страницы?

[DivineDraft]

Toy Boy, условием, к примеру

if ($(".app-header").hasClass("app-header--active")){
 alert("Маленькая шапка");
} else {
 alert("Большая шапка");
}

[Toy Boy]

DivineDraft, не то) ладно, спасибо большое за помощь!!!