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

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

На самом деле не так страшен черт как его малюют. 
Приступим: 
Для начала обернем блок ( я от балды просто обернул код вывода меню навигации) , который надо зафиксировать при прокрутке в

<div id="scroll-menu" class="default">
...

</div>





Далее пишем простой ""жабаскрипт" смены класса данного блока при определенном расстоянии

<script>
 $(document).ready(function(){
        var $menu = $("#scroll-menu");
        $(window).scroll(function(){
            if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){
                $menu.removeClass("default").addClass("fixed");
            } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
                $menu.removeClass("fixed").addClass("default");
            }
        });//scroll
    });
</script>
 
*тут 100 - это расстояние прокрутки вверх или вниз на 100px (шапки бывают разной высоты, поэтому полной универсальности не ждите... пропишите сколько нужно)

вставляем этот скрипт в шапку перед 
 
</head>

Ну и стиль для фиксированного блока: 
#scroll-menu.fixed{
position: fixed;
top: 0;
z-index:99;
margin:auto;
width: 100%
 
}

все, господа.... просто? несомненно, пример смотрим на нашей многострадальной демке

3 комментариев / Написать комментарий

Написать комментарий

Внимание: HTML не поддерживается! Используйте обычный текст!
    Бесполезно           Полезно
Captcha

Подпишитесь

Рассылаем только значимую информацию

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