Я, конечно, код вам расписывать не буду здесь, но смысл очень простой. Там стоит по скроллу раздавание классов. То есть, опускаемся на 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....)
Это пример плавного появления кнопки наверх, когда нужно. Здесь все реализовано по такому же принципу для классов меню. У самого меню изначально стоит фиксированная позиция, и ей просто добавляется дополнительный класс, у которого изменяется фон.
