Для удобства пользователей, можно зафиксировать меню при прокрутке страницы с помощью JavaScript и библиотеки jQuery. С помощью такого фиксированного меню пользователям будет проще переходить по страницам сайта.

Фиксированное меню на jQuery

 
В этом примере я привожу код фиксированного меню, как сделано на этом сайте.

    $(window).scroll(function(){
        if ($(this).scrollTop() > 140 && screen.width >= 979) {
            $('#masthead').css({
                "background-color": "rgba(0,0,0,0.6)",
                "position": "fixed",
                "width": "100%"
            });
        }
        else if ($(this).scrollTop() < 140) {
            $('#masthead').css({
                "background-color": "",
                "position": "",
                "width": "99%"
            });
        }
    })

Функция .css() — позволяет нам задать нужные стили для крепления меню вверху страницы.

Функция .scrollTop() — измеряет высоту прокрутки. В данном случае — если прокрутка на более чем 140 px — то будет применена функция .css с прикреплением стилей, если меньше — функция .css — очистит значения и меню вернется в первоначальное состояние.

Дополнительно используется проверка на ширину экрана (screen.width >= 979) — я не хочу, чтобы пользователям, посетившим сайт с мобильника меню перекрывало контент, поэтому скрипт выполняться не будет, если ширина экрана менее 979 px.

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