Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать в интернете на создании сайтов и блогов

Изучаем плагин bootstrap affix и создаем живое меню для своего сайта

Доброго времени суток всем, кто увлекается изучением фреймворка Bootstrap. Сегодня я поведаю вам об одном очень интересном и достаточно непростом элементе под названием Bootstrap Affix Plugin.

Из этой статьи вы узнаете, для чего используют этот плагин, найдете описание всех встроенных элементов управления таких как классы, методы, опции, события и научитесь выполнять с их помощью настройку веб-страниц. А под конец прочтения публикации вы найдете классный пример программной реализации лэндинга. Ну а теперь перейдем к делу!

Для начала разложим все по полочкам

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

Само английское наименование элемента дословно переводится как «прикрепить, приклеить». Из этого следует, что описываемый инструмент Bootstrap-а 3 позволяет прикрепить выбранные объекты веб-страницы к какой-то ее определенной области. При этом данное поведение последних переключаемое, т.е. изменяется от статического позиционирования к фиксированному и наоборот.

Плагин Аффикс часто применяется для закрепления навигационных панелей (Navbar, Sigebar и других) и блоков, важных кнопок или сообщений. В качестве примера можно привести сайт http://www.w3schools.com/bootstrap/default.asp, который достаточно часто фигурирует в моих статьях, связанных с фреймворком. Обратите внимание на изменение положения панели меню сверху страницы. Вот так работает Affix.

Куда же без теории

Немного теории

Начну с классов

В изучаемом плагине все строится вокруг трех классов: .affix, .affix-top и .affix-bottom. Каждый из них отвечает за конкретное состояние. При этом стоит обязательно прописывать css-правила, чтобы регулировать позиции размещения объектов.

Так, если выбранный элемент закрепляется сверху, то стоит указывать top, а если снизу – bottom. Иногда это просто значение «0», а в некоторых случаях вам придется помучатся и подобрать позиционирование в пикселах.

Тут стоит отметить, что из-за неправильной настройки отступов в коде css и js или их несовпадение может вызвать такую проблему, как blinking (flickering), что означает мерцание объекта. В этом случае код не работает корректно в основном из-за невнимательности верстальщика и неверной установкой чисел. Поэтому в первую очередь стоит проверить все размерности.

Несколько слов о важных атрибутах

Для создания приклеенного объекта нужно воспользоваться несколькими атрибутами. Во-первых, это data-spy, в котором в качестве значения стоит указать «affix». Во-вторых, часто используется такой вид атрибута, как data-offset-top/bottom, где в качестве значения указывается отступ от края в пикселах.

Доступные возможности в JavaScript

Помимо data-атрибутов, как и обычно, существуют аналогичные методы в скриптовой библиотеке jQuery. В первую очередь вызов плагина происходит через метод $.affix (). В нем можно использовать две опции: offset и target.

  • Offset используется для указания количества пикселей, на которое прокрутится выбранный элемент и после закрепится. По умолчанию стоит параметр 10. Вы можете контролировать сразу два направления, добавляя размерность для шапки и «подвала». Сейчас будет кстати добавить информацию о дополнительной плюшке, встроенной в библиотеку JavaScrip-а. Это специальный метод .outerHeight (true), который функционирует вместе с navbar. С его помощью производится автоматическое закрепление навигационной панели сверху.
  • Target указывает, к какому элементу применится параметр affix.

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

Событие Описание
affix.bs.affix Применяется перед фиксированием положения элемента, т.е. когда класс .affix- top должен будет замениться на .affix класс.
affix-top.bs.affix Вызывается перед тем, как верхний объект вернется на его начальную позицию, т.е. перед тем, как класс .affix заменится на .affix- top.
affix-bottom.bs.affix Применяется перед тем, как нижний элемент вернется на свою стартовую позицию. В этом случае перед изменением .affix на .affix-bottom.
affixed.bs.affix Срабатывает уже после установки фиксированного положения элемента, т.е. после замены классов.
affixed-top.bs.affix Вызывается после того, как верхний объект вернулся к начальному положению, т.е. после того, как был установлен класс .affix- top.
affixed-bottom.bs.affix Применяется сразу после того, как нижний элемент принял первоначальную позицию, т.е. произошла замена класса на .affix- bottom.

Контрольная проверка знаний

Ну а теперь сгребем все полученные теоретические знания и применим их к написанию небольшого симпатичного веб-приложения.

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
  <title>Cool Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
.navbar, .container-fluid {min-width:490px;}
   .container-fluid {
    text-align:center;
    background-color:#FFD700;
    text-shadow: 0 0 4px #010;
    color:#fff;
    height:179px;
}
.footer {height: 65px; margin-top: 15px; background-color:#8B4500;}
  .affix {
      top: 0;
      border-color:  #010;
      width: 100%;
    background-color:  #8B3A3A;
    transition: all .6s ease-in;
    -webkit-transition: all .6s ease-in;
}
 
.affix a {
       color: #fef !important;
    padding: 15px !important;
    -webkit-transition: all .6s ease-in;
    transition: all .6s ease-in;
}
 
.affix-top a {
    padding: 29px !important;
}
  #page1{padding:65px;   margin-top: -25px; height: 250px; background-color: #EE6363;}
  #page2{padding:65px;  margin-top: 15px; height: 250px;background-color: #FF8247;}
  #page3{padding:65px;  margin-top: 15px;height: 250px;background-color:  #FF7F00;}
 
  </style>
</head>
<body>
 
<div class="container-fluid" >
  <h1>Лендинг-сайт с примером</h1>
  <h3>Реализован плагин Аффикс!</h3>
  <h3>Прокрутите контент страницы, чтобы проанализировать работу data-spy="affix".</h3>
</div>
 
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="178">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Navb">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
<div class="collapse navbar-collapse" id="Navb">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Главная</a></li>
    <li><a href="#page1">Один</a></li>
    <li><a href="#page2">Два</a></li>
    <li><a href="#page3">Три</a></li>
  </ul>
</div>
</nav>
 
<div id="page1" class="container-fluid">
  <h1>Первая страница</h1>
<h2>Здесь расположена ключевая информация.</h2>
 </div>
<div id="page2" class="container-fluid">
  <h1>Вторая страница</h1>
<h2>Здесь расположена интересная информация.</h2></div>
<div id="page3" class="container-fluid">
  <h1>Третья страница</h1>
<h2>Здесь расположена контактная информация.</h2></div>
<footer class="container-fluid footer">
  <h3>Все права защищены</h3>
</footer>
</body>
</html>

Не забывайте делиться полученными знаниями с друзьями и обязательно вступайте в группу моих любознательных подписчиков. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 1074 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: