Фиксированное меню сверху сайта на 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