Популярность и тенденции в мире графического веб-дизайна не так долговечны, как могло показаться. Однако, некоторые элементы по-настоящему достойны внимания и реализации. Одним из таких является sticky header. Липкие элементы завоевали свою нишу с глобальной популяризацией сенсорных устройств.

Этот эффект используют в большинстве случаев при разработке лендинг-сайтов (landing page). Если структура вашего сайта не содержит «липких» элементов, то приведенный ниже пример сможет разбавить монотонность и статичность графического интерфейса веб-сайта.

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

Для этого необходимо добавить в css файл:

.sticky{
 opacity: 0.75;
 filter: alpha(opacity=75); /* For IE8 and earlier */
}

Далее в файле js, добавляем:

jQuery(function( $ ){

 if( $( document ).scrollTop() > 0 ){
 $( '.site-header' ).addClass( 'sticky' ); 
 }

 // Add opacity class to site header
 $( document ).on('scroll', function(){

 if ( $( document ).scrollTop() > 0 ){
 $( '.site-header' ).addClass( 'sticky' ); 

 } else {
 $( '.site-header' ).removeClass( 'sticky' ); 
 }
 });
});

Необходимо помнить, что .site-header у вас скорее всего называется по-другому.  Очень интересная js функция реализуется на примере sticky header. Также, можно изменить первоначальное меню при  scroll-e, сделав его совершенно другим (изменить цвет, фон, анимацию). Тем самым привлечь внимание или позабавить посетителей веб-сайта.