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

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

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

html

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

$(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;
}

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

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

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