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