Продолжая работать над совершенствованием фиксированного меню, нашел следующее решение.

Верстка фиксируемого блока

<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;

Поделиться в соц. сетях: