Sticky header или как закрепить меню сайта сверху

Фиксированное меню сверху сайта на jQuery. Можно просто с помощью CSS позиционирования зафиксировать его сверху и все. Но наш метод более гибок, меню сверху сайта мы закрепим после пролистывания страницы, сделаем эффект появления. И так, как закрепить шапку сайта сверху?

Пример шапки сайта

html

 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/sticky-header.js"></script>
 
<header class="example"> 
  <!--  шапка сайта ... --> 
</header>
 

Вызов плагина

 
$(document).ready(function(){
  $('.example').stickMe({
 
  // Длительность анимации появления
  transitionDuration: 300,
 
  // Включает тень у шапки
  shadow: false,
 
  // Прозрачность тени у шапки
  shadowOpacity: 0.3,
 
  // Включение анимации при появлении шапки
  animate: true,
 
  // true: Шапка прилипнет к верху когда окно браузера будет достигнут центр страницы
  // false: Шапка прилипнет к верху как только пропадет из поля зрения при скролинге страницы
  triggerAtCenter: true,
 
  //  Шапка прилипнет к верху при пролистывании страницы на 200 пикселей
  topOffset: 200,
 
  // Плавное появление 'fade' или скольжение при появлении 'slide'
  transitionStyle: 'fade',
 
  //  Шапка прикреплена к верху при загрузке страницы
  stickyAlready: false
 
});
})
 

Важный момент со стилями

 
/* Убедитесь что ваше меню или шапка сайта имеют свойство z-index, background и 100% ширину блока */
.example {
  width: 100%;
  z-index: 999;
  background-color: #ffffff;
}
 
/* Дополнительный стиль оформления для класса плагина .sticking, с помощью него можно по другому стилизовать меню в момент прилипания */
.sticking {
  width: 100%;
  z-index: 999;
  background-color: #ffffff;
}
 

Полезно знать

 
<!-- Добавляем класс к шапке после загрузки страницы --> 
<header class="example stick-me not-sticking"> 
  <!--  Шапка сайта ... --> 
</header>
 
 
 
<!-- Шапка прикреплена к верху страницы --> 
<header class="example stick-me sticking"> 
  <!--  Шапка сайта ... --> 
</header>
 

Параметры по-умолчанию

 
transitionDuration: 300,
shadow: false,
shadowOpacity: 0.3,
animate: true,
triggerAtCenter: true,
transitionStyle: 'fade',
stickyAlready: false
 

Настройка плагина Sticky header

Переменная	Тип	Пример	Описание
topOffset	int	topOffset: 300	Шапка сайта прикрепится к верху когда страница будет пролистана вниза на 300 пикселей
shadow	boolean	shadow: true	Шапка будет отбрасывать тень после того, как прикрепится к верху страницы
shadowOpacity	float	shadowOpacity: 0.5	Прозрачность тени
animate	boolean	animate: true	Анимация появления шапки сайта
transitionStyle	string	transitionStyle: 'fade'	Какой тип эффекта использовать в момент прикрепления шапки 'fade' - проявление 'slide' - скольжение
triggetAtCenter	boolean	triggerAtCenter: false	По умолчанию шапка прикрепляется к верху при пролистывании до середины страницы, если установить значение 'false' шапка прикрепится как только пропадет из видимости при пролистывании страницы
stickyAlready	boolean	stickyAlready: true	Прикрепляет шапку страницы к верху сразу после загрузки страницы
transitionDuration	int	transitionDuration: 1000	Продолжительность эффекта появления

События

Событие	Описание
sticky-begin	Срабатывает в момент прилипания шапки сайта
sticking	Шапка сайта прикреплена к верху страницы (это событие вызвается каждый раз при пролистывании страницы, если шапка прикреплена)
top-reached	Срабатывает при достижении начала страницы
bottom-reached	Срабатывает при достижении конца страницы

Как работать с событиями

 
$(document).ready(function(){
  $('.site-header').on('sticky-begin', function() { 
    console.log("Шапка прикреплена к верху страницы"); 
  });
 
  $('.site-header').on('sticking', function() { 
    console.log("Шапка прикреплена"); 
  });
 
  $('.site-header').on('top-reached', function() { 
    console.log("Начало страницы достигнуто"); 
  });
 
  $('.site-header').on('bottom-reached', function() { 
    console.log("Конец страницы достигнут"); 
  });
})
 
 

Скачать плагин можно по ссылке: jQuery plugin Sticky Header 1.01