Горизонтальное липкое меню с подсветкой

DEMO

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

За основу возьмём страницу примера из моей заметки как сделать кнопку наверх на сайте и сделаем горизонтальное меню "липким" и "подсвеченным". И так приступим. Для начала сделаем горизонтальное меню "липким". Мы специально обернули наше топменю в див topmenu-container. Если бы мы применили фиксированное позиционирование к самому топменю, то у нас были бы проблемы с шириной в % и были бы проблемы с резиновой вёрсткой. Мы рассчитывали ширину пунктов меню в % от ширины дива wrap (960px), а если бы мы применили фиксированное позиционирование к диву топменю то контекстом расчёта % стала бы ширина всего экрана. Для этого мы и обернули див топменю в див topmenu-container. Что бы навигация прилипла к верху экрана нам следует применить к диву topmenu-container css свойство position: fixed и правильно его спозиционировать. При достижении дива topmenu-container верхнего края экрана данное css правило должно включаться. Что бы понять, что див достиг края экрана мы в скрипте при прокрутке постоянно сравниваем величину "проскроленности" страницы с величиной положения контейнера меню относительно документа. Если величина "проскроленности" больше величины положения контейнера, то это значит, что навигация дошла до края экрана и должна сделаться "липкой". А вот и сам скрипт.

$(document).ready(function(){
  /*обрабатываем событие прокрутки страницы*/
  $(window).scroll(function () {
    /*делаем меню "липким"*/
    if ($(this).scrollTop() > 150){
       $('.topmenu-container').css({'min-width': '100%',
                                    'position': 'fixed',
                                    'top': '70px',
                                    'left': '0'
                                  });
       }
       if ($(this).scrollTop() < 150){
         $('.topmenu-container').css({'position': 'relative', 
                                                  'top': '0'
         });
       }

 })

});   

Думаю больших вопросов код не вызвал. Отслеживаем событие прокрутки страницы $(window).scroll. Конструкция $(this).scrollTop() получает размер "прокрученности" страницы. Ну и потом по условиям назначаются диву topmenu-container определённые css свойства.

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

$(document).ready(function(){
  /*обрабатываем событие прокрутки страницы*/
  $(window).scroll(function () {
    /*делаем меню "липким"*/
    if ($(this).scrollTop() > 150){
       $('.topmenu-container').css({'min-width': '100%',
                                    'position': 'fixed',
                                    'top': '70px',
                                    'left': '0'
                                  });
    }
    if ($(this).scrollTop() < 150){
       $('.topmenu-container').css({'position': 'relative', 
                                                'top': '0'
       });
    }
    
    /*на какое расстояние проскролена страница*/
    var windowScroll=$(this).scrollTop();
    /*положение параграфа относительно страницы*/              
    var p1Scroll=$('#paragraf-1').offset().top;
    var p2Scroll=$('#paragraf-2').offset().top;
    var p3Scroll=$('#paragraf-3').offset().top;
    var p4Scroll=$('#paragraf-4').offset().top;
    var p5Scroll=$('#paragraf-5').offset().top;
    var p6Scroll=$('#paragraf-6').offset().top;

    /*подсветка пунктов меню при прокрутке*/
    if(windowScroll+120>=p1Scroll && windowScroll+120<=p2Scroll){
        $('.menuP1').css({'background-color': 'red'});
    }else{
        $('.menuP1').css({'background-color': '#8699a4'});
    }
    if(windowScroll+120>=p2Scroll && windowScroll+120<=p3Scroll){
        $('.menuP2').css({'background-color': 'red'});
    }else{
        $('.menuP2').css({'background-color': '#8699a4'});
    }
    if(windowScroll+120>=p3Scroll && windowScroll+120<=p4Scroll){
        $('.menuP3').css({'background-color': 'red'});
    }else{
        $('.menuP3').css({'background-color': '#8699a4'});
    }
    if(windowScroll+120>=p4Scroll && windowScroll+120<=p5Scroll){
        $('.menuP4').css({'background-color': 'red'});
    }else{
        $('.menuP4').css({'background-color': '#8699a4'});
    }
    if(windowScroll+120>=p5Scroll && windowScroll+120<=p6Scroll){
        $('.menuP5').css({'background-color': 'red'});
    }else{
        $('.menuP5').css({'background-color': '#8699a4'});
    }
    if(windowScroll+120>=p6Scroll){
        $('.menuP6').css({'background-color': 'red'});
    }else{
        $('.menuP6').css({'background-color': '#8699a4'});
    }
  })
});   

С подсветкой пунктов меню я думаю то же всё просто. Вычисляем расстояние от верха страницы для каждого пункта меню $('#paragraf-1').offset().top и записываем значение в переменную. Потом для каждого пункта проводим проверку на каком расстоянии от верха страницы пункт находится. Если пункт от края находится на расстоянии 120px ему назначается через css красный цвет. Конечно для каждого пункта меню проверять условие не самое лучшее решение, но код работает. Со временем когда дойдут руки я его улучшу.