Скроллинг страницы.

Den 30 апреля 2014 2230 просмотров

При создании сайта, особенно если это одностраничник или, как сейчас модно называть, Landing Page, очень полезным является контроль прокрутки страницы. Многие заметят, что для это уже есть много готовых инструментов, одним из которых является Bootstrap от Twitter. Я и сам, по началу, рассматривал его как вариант разработки одностраничников. Однако по определенным причинам решил самостоятельно "докопаться" до истины.

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

Начнем с html- кода, он будет примерно таким:

<body>
  <header>
    <div class="header-wrap">
      <nav class="header-nav">
        <a href="" class="header-nav-link link-view active" data-target="main">Главная</a>
        <a href="" class="header-nav-link link-view" data-target="section_one">Раздел 1</a>
        <a href="" class="header-nav-link link-view" data-target="section_two">Раздел 2</a>
      </nav>
    </div>
  </header>

  <section id="main"></section>
  <section id="section_one"></section>
  <section id="section_two"></section>
</body>

Добавим стили элементам страницы в файл main.css:

header {
  position: fixed;
  width: 100%;
  height: 90px;
  background-color: #555;
  margin: 0;
  z-index: 999;
}
a, a:hover {
  text-decoration: none;
}
.link-view {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 14px;
  color: #fff;
}
nav {
  float: left;
  width: 500px;
  height: 80px;
  line-height: 80px;
  margin-left: 120px;
  display: inline-block;
}
.header-nav .header-nav-link {
  margin: 0 15px 0 15px;
}
.header-nav .active {
  color: #cbef39;
}

Теперь перейдем к написанию простенького jQuery скрипта для обработки прокрутки страницы. Текст скрипта сохраним в файле main.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(document).ready(function(){
  // сохраняем высоту шапки
  var headerHeight = $('header').height();
  
  // прокрутка при клике по пункту меню 
  $("a.header-nav-link").click(function(e) {
    e.preventDefault();
    // вычисляем смещение от начала документа до нужного раздела
    var offsetTop = $("#"+$(this).data("target")).offset().top - headerHeight;
    // производим прокрутку
    $('html, body').animate({scrollTop: offsetTop}, 1000);
  });
  // обработка скроллинга (изменение активного элемента меню)
  $(document).scroll(function(){
    var offsets = [];
    $('nav a').each(function(index, element){
      // собираем в массиве offsets смещения разделов относительно начала документа
      offsets.push($("#" + $(element).data('target')).offset().top);
    });
    // дополняем массив еще одним елементом- высота всего документа
    offsets.push($(document).height());
    // изменяем активный пункт как только область зашла за полэкрана: $(window).height() / 2
    var docScroll = $(document).scrollTop() + headerHeight + $(window).height() / 2;
    for (var i = 0; i < offsets.length - 1; i++) {
      if (docScroll >= offsets[i] && docScroll < offsets[i+1]) {
        $('.active').removeClass('active');
        $('nav a').eq(i).addClass('active');
        break;
      };
    };
  });
})

Вот и все.

Удачи!

Комментарии

Аватар пользователя Ирина

Ирина 16 сентября 2014

Здравствуйте.
У Вас в этой части кода есть ошибка (консоль ругается):
for (var
if
$('.active').removeClass('active');
$('nav a').eq(i).addClass('active');
break;
Без этого кусочка код работает, но понятно, что не выделяются пункты меню.
Исправте, пожалуйста.