Как создать появляющееся горизонтальное меню после прокрутки?

Question

[Elios]

Интересует не простой момент, по факту меню должно появиться после прокрутки на определенное количество пикселей. Но есть одно но, оно должно сформироваться только после прокрути, и ранее не должно показываться на сайте. При скролинге наверх должно удаляться полностью, т.к вверху уже есть меню. К сожалению примера показать не могу так как просто не нашел его.
Скрипт использую такой:

$(function () {
 
    $(window).scroll(function(event) {
        if($(this).scrollTop() > 150) {
        $("#menu").fadeIn();
        $("#menu").addClass('fixed')
    }
    else {
        $("#menu").removeClass('fixed')
    }
    });
 
});

Отсюда следует что при прокрутке в 150px закрепиться меню.
Как сделать на основе этого скрипта что бы при прокрутке меню формировалось??

Народ сильно не пинайте если не доходчиво описал проблему)

Answer 1

[Юрий Лобанов]

Зачем Вам новое меню? При скролле добавляйте новый класс своему меню, исключайте его из потока с использованием fixed, а чтобы при этом контент не уезжал на высоту меню наверх — используйте margin-top.
А уж в новом классе переопределяйте свое меню как хотите, хоть внешний вид, хоть некоторые пункты скрывайте.
Вот пример писал для подобного вопроса.
codepen.io/iiil/pen/InDbp

Comments

[Elios]

За ответ спасибо, но мне нужно что бы сформировалось новое меню, на вашем примере есть пункт меню сверху, у меня же эти пункты должны появиться только после прокрутки.

[Elios]

вот например если воткнуть в скрипт появление нового класса, но у меня тяму не хватает как это реализовать.

[Евгений Петров]

@Elios вы меню сформируете сразу, а при прокрутке только лишь покажете его.
display:none
height:0 + overflow:hidden
position:fixed + top:-высота_меню
position:fixed + top:0 + transform:translate(0, -высота_меню)

Можно продолжать и продолжать способы скрытия — завались их.

[Elios]

а для нуба расшифруйте) это я так понял скрытие через стили?

[Юрий Лобанов]

@Elios да, это скрытие через стили. У меня в примере добавляется стиль fixed. В css пропишите, что пункт меню .item3 {display:none;}, а .fixed .item3 {display:block;} или что там у Вас. Формировать меню заново не надо, не важно, будете ли Вы писать свою cms или использовать готовую — это лишние хлопоты и в данном случае точно не оправданные.

[Elios]

@iiil спасибо за разъяснение, решение работает!

[morgana_lf]

Здравствуйте, а не могли бы вы подсказать, как в вашем примере можно сделать, чтобы при прокрутке наверх меню так же плавно уезжало обратно? Пока что оно скрывается резко, вместе с удалением класса .fixed.

[Kosstya]

Спасибо, помогли!