• Автор:

    Flesha
  • Добавлено:

    сен 19, 2013
  • Комментариев:

    1
  • Просмотров:

    1976

Хак Фиксированное меню

Хак Фиксированное меню

Как сделать, чтобы при прокрутке какой либо из блоков фиксировался (приклеивался к верхней кромке окна) когда скролл доходит до этого самого блока.

В принципе тут нет ничего сложного, нам понадобится только подключенная библиотека jQuery.
Для наглядности предлагаю рассмотреть реализацию.

Отдельно хочу заметить, что данная реализация подойдет только для тех шаблонов, где это меню/блок в принципе может быть отделен от шаблона.

Итак, имеем следующий контейнер, который мы хотим перемещать. У него обязательно должен быть задан свой уникальный ID.

<div id="main-menu-area">
....
</div>


В файле стилей нам надо прописать простенький стиль:
.scrollable{position:fixed;top:0;z-index:9999;}


С его помощью будет фиксироваться блок в верхней части сайта.

И в заключении прописать JS код:
var scroll_menu = 0;
function slide_content(){
if($(window).scrollTop() > scroll_menu) $("#main-menu-area").addClass('scrollable');
else $("#main-menu-area").removeClass('scrollable');
}
$(function(){
scroll_menu = $("#main-menu-area").offset().top;
$("#main-menu-area").css({width:$("#main-menu-area").width()+'px'}).wrap("<div style='height:"+$("#main-menu-area").outerHeight()+"px'></div>");
slide_content();
$(window).scroll(slide_content);
});


Повторно обращу внимание на ID. У меня он main-menu-area у вас он будет другой, поэтому надо будет везде в коде заменить его на свой.

С уважением,
Олег Александрович a.k.a. Sander
Источник: SanDev.pro
Вернуться

Комментарии:


  1. Saidislom → 4 февраля 2014 20:46
    СУПЕР СПС ADMIN
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.