Фиксированное меню с подсветкой активного пункта

В данной статье мы рассмотрим как создать фиксированное меню с подсветкой активного пункта меню при прокрутке страницы.

Для крупных справочников, документаций и прочих сайтов с большим количеством информации на одной странице особо остро возникает необходимость качественной навигации. Зачастую данную проблему пытаются решить с помощью «ссылок-якорей», но этого всё равно недостаточно.

Пример фиксированного меню:

Фиксированное меню с подсветкой активного пункта при прокрутке

Создание фиксированного меню

Создаём структуру нашей страницы. Для удобства верстки я подключил bootstrap

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
 
    <div class="container-fluid">
      <div class="row">
 
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
          <section id="block1">
            block1
          </section> 
          <section id="block2">
            block2
          </section> 
          <section id="block3">
            block3
          </section> 
          <section id="block4">
            block4
          </section>
        </div>
 
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 right-fixed-menu">
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#block1">Главная</a></li>
            <li><a href="#block2">Профиль</a></li>
            <li><a href="#block3">Сообщение</a></li>
            <li><a href="#block4">Контакты</a></li>
          </ul>
        </div>
 
      </div>
    </div>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>

Добавляем стили к нашим блокам:

#block1{
  height: 400px;
  width:100%;
  display: block;
  background-color: #ffa2a2;
}
#block2{
  height: 400px;
  width:100%;
  display: block;
  background-color: #b4ffb4;
}
#block3{
  height: 400px;
  width:100%;
  display: block;
  background-color: #6f6fff;
}
#block4{
  height: 400px;
  width:100%;
  display: block;
  margin-bottom:500px;
  background-color: #ccc;
}
.nav-pills.nav-stacked{
  position: fixed;
  right:0px;
  top:0px;
}

Отлично. Наша страница готова, осталось добавить эффект смены активного пункта при прокрутке страницы:

$(document).ready(function () {
 
    function Scroll_block(){
        var scroll_top = $(document).scrollTop();
        $(".right-fixed-menu a").each(function(){
            var hash = $(this).attr("href");
            var target = $(hash);
            if (target.position().top <= scroll_top && target.position().top + target.outerHeight() > scroll_top) {
                $(".right-fixed-menu li.active").parent().removeClass("active");
                $(this).parent().addClass("active");
            } else {
                $(this).parent().removeClass("active");
            }
        });
    }
 
 
    $(document).on("scroll", Scroll_block);
 
    $("a[href^=#]").click(function(e){
        e.preventDefault();
 
        $(document).off("scroll");
        $(".right-fixed-menu li.active").parent().removeClass("active");
        $(this).parent().addClass("active");
        var hash = $(this).attr("href");
        var target = $(hash);
 
        $("html, body").animate({
            scrollTop: target.offset().top
        }, 500, function(){
            window.location.hash = hash;
            $(document).on("scroll", Scroll_block);
        });
 
    });
 
});