Фиксируем меню при прокрутке страницы

При помощи CSS устанавливаем высоту «шапки» и создаем правила для блока с меню.

/*шапка*/
header{
   height:150px;
}
/*фиксированное плавающее меню*/
#top_nav{
   top: 150px; /*высота шапки в пикселях*/
   position: fixed;
   z-index: 1000;
}

Теперь переходим к написанию скрипта на jQuery, который будет фиксировать меню вверху страницы при прокрутке.

<script>
var h_hght = 150; // высота шапки
var h_mrg = 0;    // отступ когда шапка уже не видна
                 
$(function(){
 
    var elem = $('#top_nav');
    var top = $(this).scrollTop();
     
    if(top > h_hght){
        elem.css('top', h_mrg);
    }           
     
    $(window).scroll(function(){
        top = $(this).scrollTop();
         
        if (top+h_mrg < h_hght) {
            elem.css('top', (h_hght-top));
        } else {
            elem.css('top', h_mrg);
        }
    });
 
});
</script>

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *