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

Віталий

10 років ago

Доброго времени суток 🙂
Сегодня речь пойдет о способе, как можно организовать фиксированное меню при прокрутке страницы. У меня уже есть статья о таком меню здесь Меню ( блок ) с плавающей фиксацией ( jQuery ), но данный способ немного отличается. В прошлом примере, при прокрутке - меню стояло на своем месте, а когда подходило до верхушки, то прилипало и оставалось уже там до самого конца. Данный же способ выглядит немного иначе. При прокрутке меню скрывается, а потом плавно появляется сверху. Вот пример.

Ну что же, приступим 🙂

1. HTML разметка

Первое что мы сделаем, это вставим наш HTML код в том месте Вашего сайта, где вы хотите видеть меню.

 <div id="menu" class="default">
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">WordPress</a></li>
                <li><a href="#">HTML5&amp;CSS3</a></li>
                <li><a href="#">PHP</a></li>
            </ul>
        </div>

Меню присваивается класс default, благодаря которому наш jquery сможет потом определить что именно этот блок потом нужно закрепить сверху.

2. jQuery код

В шапке перед закрывающимся head вставляем код. Как я писал выше, он определить блок с классом default и после прокрутки присваивает ему класс fixed. Можете поменять названия классов, если это Вам нужно. Но только внимательно и не пропустите ничего, иначе все попросту перестанет работать. Менять нужно в jQuery, HTML и CSS.

<script type="text/javascript">
    $(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")
                           .fadeIn('fast');
                });
            } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
                $menu.fadeOut('fast',function(){
                    $(this).removeClass("fixed")
                           .addClass("default")
                           .fadeIn('fast');
                });
            }
        });        
    });
</script>

3. Библиотека jQuery

Возможно у Вас уже это сделано и Вы можете пропустить этот пункт, чтобы не произошло конфликта. Если же нет, то вставьте перед скриптом из пункта №2 следующий код.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

4. CSS стили

Для того чтобы все выглядело красиво и конечно, же правильно работало, вставляем в Ваш файл стилей следующий код.

 #menu{
        text-transform: uppercase;
        text-align: center;
        line-height: 50px;
        background: #333;
    }
    #menu ul{padding:0; margin:0;}
    #menu li{
        display: inline;
        list-style:none;
        margin: 5px 10px;
    }
    #menu li a{
        padding:5px 10px;
        color:#fff;
        text-decoration: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    #menu li a:hover{
        background: #36c;
        color: #ff0;
        -webkit-transition-property: color, background;
        -webkit-transition-duration: 0.5s, 0.5s;
    }
    .default{
        width:920px;
    }
    .fixed{
        position:fixed;
        top:-5px; left:0;
        width:100%;
        padding:10px 0;
    }

Если все сделано правильно, то у Вас должно быть как в примере. Исходники скачать можете, нажав на ссылку ниже.

На этом все, спасибо за внимание 🙂

Exit mobile version