Как реализуется такое меню?

Question

[svilkov87]

Добрый день!
Кто-нибудь может поделится опытом, как вообще реализуется подобное меню: bootstraptema.ru/_sf/11/1188.html

В примере используется бутстрап, но хотелось бы понять как это сделать на чистом css + jquery.
Фишка в том, что меню меняется( цвет, выпадает итд...)при скролле и перемещении из одной секции в другую.

Буду рад помощи.

Answer 1

[Роман Татаринов]

Я, конечно, код вам расписывать не буду здесь, но смысл очень простой. Там стоит по скроллу раздавание классов. То есть, опускаемся на 50 пикселей, получаем дополнительный класс на меню, у которого стоит изменение бэкграуна. Потом просто добавляются и убираются активные классы элементам меню (в зависимости от того, насколько вниз опустилась страница). На каждом дополнительном классе стоит свой css.

jQuery(document).ready(function() {
    jQuery("#scrollup").mouseover(function() {
        jQuery(this).animate({
            opacity: .65
        }, 100)
    }).mouseout(function() {
        jQuery(this).animate({
            opacity: 1
        }, 100)
    }).click(function() {
        $("html, body").animate({
            scrollTop: "0px"
        });
        return !1
    });
    jQuery(window).scroll(function() {
        0 < jQuery(document).scrollTop() ? jQuery("#scrollup").fadeIn("slow") : jQuery("#scrollup").fadeOut("slow")
    })
});

#scrollup {
    position: fixed;
    width: 35px;
    height: 35px;
    right: 20px;
    bottom: 40px;
    display: none;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: -3px -76px;
background-image: url('data:image/png;base64....)

Это пример плавного появления кнопки наверх, когда нужно. Здесь все реализовано по такому же принципу для классов меню. У самого меню изначально стоит фиксированная позиция, и ей просто добавляется дополнительный класс, у которого изменяется фон.

Answer 2

[Олег]

Можно так на чистом js https://jsfiddle.net/joomla/3epbbxLf/