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

Добавить комментарий