Как реализуется такое меню?
Я, конечно, код вам расписывать не буду здесь, но смысл очень простой. Там стоит по  скроллу раздавание классов. То есть, опускаемся на 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....)
Это пример плавного появления кнопки наверх, когда нужно. Здесь все реализовано по такому же принципу для классов меню. У самого меню изначально стоит фиксированная позиция, и ей просто добавляется дополнительный класс, у которого изменяется фон.
Можно так на чистом js  https://jsfiddle.net/joomla/3epbbxLf/