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

Сейчас стало модно делать плавающее меню для сайта или как его еще называют fixed меню. Например вы попали на длинную статью, на сайте находится меню сверху сайта и когда вы двигаетесь вниз по статье, то меню передвигается за вами.

jQuery

Для работы фиксированного меню нам понадобится уже установленный jQuery. Если вы не знаете как его устанавливать, то можете посмотреть пункт 1.1 в этой статье — там описывается этот процесс.

Скрипт

Для того, чтобы меню работало как нам нужно — мы будем использовать скрипт jQuery, который представлен ниже.

Этот скрипт нужно установить перед </body>

$(function() {

    var $check = false; 

    $(window).on('scroll', function() {

        if( $(window).scrollTop() >= 250 ) {
            if( $check == false ) {
                $('.nav-main').css({
                    'position': 'fixed',
                    'top': 0,
                    'left': 0
                });

                $check = true;
            }
        } else {
            if( $check == true ) {
                $('.nav-main').removeAttr('style');

                $check = false;
            }
        }
    });
});

Объяснение

Цифра 250 в строке if( $(window).scrollTop() >= 250 ) означает сколько пикселей пользователь должен пройти, прежде чем появится фиксированное меню. Вы можете настроить сколько пожелаете, например: 200, 500, 700 и тд.
Строка $(window).on('scroll', function() создает событие скроллинга, то есть кода пользователь передвигается по сайту вверх или вниз, то данный участок кода начинает активироваться.
.nav-main нужно заменить на селектор вашего меню. К примеру, у меня структура такая:
```
<div id="navigation"> 
    <ul>...</ul> 
</div>
```
, то вам нужно указывать #navigation вместо .nav-main.