Продолжая работать над совершенствованием фиксированного меню, нашел следующее решение.
Верстка фиксируемого блока
<div id="stick_menu" class="default">
В отличие от предыдущей версии меню, перед блоком ставить ничего не нужно.
Стили для фиксированного блока
#stick_menu.default {float:left; width:100%; list-style:none;}
#stick_menu.fixed {
position:fixed;
top:0; left:0;
width:100%;
z-index: 200;
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.5);
}
Скрипт фиксированного меню
jQuery скрипт для функционирования фиксированного меню. Данный код нужно поместить в конструкцию $(document).ready.
if($("div").is("#stick_menu")) {
var $menu = $("#stick_menu");
$(window).scroll(function(){
if ( $(this).scrollTop() > 300 && $menu.hasClass("default") ){
$menu.fadeOut('fast',function(){
$(this).removeClass("default")
.addClass("fixed")
.fadeIn('slow');
});
} else if($(this).scrollTop() <= 300 && $menu.hasClass("fixed")) {
$menu.fadeOut('fast',function(){
$(this).removeClass("fixed")
.addClass("default")
.fadeIn('fast');
});
}
});
}
!Только слою #stick_menu не нужно ставить свойства сглаживания эффектов
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
Еще один альтернативный способ
Еще один простой способ прилипания шапки
// Прилипание шапки
$(document).ready(function () {
var objToStick = $("#head-order");
var topOfObjToStick = $(objToStick).offset().top; //Получаем начальное расположение нашего блока
$(window).scroll(function () {
var windowScroll = $(window).scrollTop(); //Получаем величину, показывающую на сколько прокручено окно
if (windowScroll > topOfObjToStick) { // Если прокрутили больше, чем расстояние до блока, то приклеиваем его
$(objToStick).addClass("topWindow");
} else {
$(objToStick).removeClass("topWindow");
};
});
});
Только в случае именно для шапки сайта, вот это значение надо приравнять 0 (либо установить какой-либо отступ от верха). Если этого не сделать, при перезагрузке страницы с середины, прилипание будет работать с этого места.
var topOfObjToStick = 0;
[site-socialshare]
