work@lienusowl.ru

Полное портфолио: zsws.ru

Меню фиксируется при прокрутке

Для чего можно использовать фиксирование меню сверху:

В качестве примера - имеем некоторое меню, которое у нас может быть не обязательно сразу фиксированным, или находиться "top:0px;", но нам необходимо реализовать следующее - чтобы меню закрепилось сверху и оставалось там при скроле страницы + имело другое оформление.

Эта задача решаема, и давайте преступим к её реализации, всё что нам потребуется - это html структура меню, простые стили для него и стили после того как начнем скролить + небольшой скрипт который будет добавлять класс для нашего меню - за счет этого мы сможем применить для меню стиль - "position:fixed;top:0px;".

Подключение скрипта:

Структура меню в html (произвольная может быть):

	

Необходимые стили для меню:

	.default {
        width:920px;
    }
    .fixed {
        position:fixed;
        top:-5px; left:0;
        width:100%;
        padding:10px 0;
        
        -moz-box-shadow: 5px 5px 20px #333;
        -webkit-box-shadow: 5px 5px 20px #333;
        box-shadow: 5px 5px 20px #333;
    }
    .transbg {
        background-color: rgba(60, 130, 190, 0.7)!important;
    }

Далее нам нам понадобится jquery библиотека:

	

Далее сам код скрипта:

    $(document).ready(function(){
        
        var $menu = $("#menu");
            
        $(window).scroll(function(){
            if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){
                $menu.fadeOut('fast',function(){
                    $(this).removeClass("default")
                           .addClass("fixed transbg")
                           .fadeIn('fast');
                });
            } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
                $menu.fadeOut('fast',function(){
                    $(this).removeClass("fixed transbg")
                           .addClass("default")
                           .fadeIn('fast');
                });
            }
        });//будет срабатывать при прокрутке страницы
        
        $menu.hover(
            function(){
                if( $(this).hasClass('fixed') ){
                    $(this).removeClass('transbg');
                }
            },
            function(){
                if( $(this).hasClass('fixed') ){
                    $(this).addClass('transbg');
                }
            });//эффект который можно добавить при наведении на меню
    });//jQuery