Фиксированное меню для DLE

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

Часто люди спрашивают - как сделать, чтобы при прокрутке какой либо из блоков фиксировался (приклеивался к верхней кромке окна) когда скролл доходит до этого самого блока.
Проще говоря - сделать как меню у меня на сайте :)
В принципе тут нет ничего сложного, нам понадобится только подключенная библиотека 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
Комментарии: (6)
  1. foto
    VIP 18 сентября 2013 16:47 #
    Добавь в блог в CSS этот код:
    #main-menu-area.scrollable,
    .scrollable #main-menu,
    .scrollable #main-menu-rulers,
    .scrollable #main-menu li  {
    	height: 40px;
    	background-position: 0 50%;
    }
    .scrollable #main-menu li {
    	line-height: 40px;
    }
    .scrollable #main-menu li a {
    	height: 36px;
    }
    .scrollable #searchform>div {
    	height: 25px;
    	margin-top: 8px;
    }
    .scrollable #searchform>div>input {
    	height: 25px;
    }
    .scrollable #main-menu-rulers li {
    	padding-top: 10px;
    	padding-bottom: 10px;
    }

    а то уж больно лошадиное меню при скролле, после добавления будет вот так
    +2
    1. foto
      Администратор 18 сентября 2013 17:00 #
      Большое спасибо :)
      0
  2. foto
    Посетитель 18 сентября 2013 20:09 #
    надеюсь эта мода на плавающие элементы со временем пройдет, как и на кнопку поднять вверх.

    для некоторых типов сайтов это действительно нужно, для партфолио, если элемент делать сбоку, и нужно проматывать много скриншотов, с возможностью видеть краткое инфо о проекте с блоком перехода к следующей работе или предыдущей, или для одностраничников нужен плавающий элемент сверху.
    0
    1. foto
      Администратор 18 сентября 2013 21:02 #
      Покуда есть спрос - будет предложение.
      0
  3. foto
    Посетитель 18 сентября 2013 20:13 #
    и те же расширяющиеся блоки при прокрутке как на этом сайте, и меняющаяся структура при адаптивности.

    не нужно лепить все подряд что бы показать что ты умеешь, нужно подстраивать под каждый проект индивидуально.
    0
  4. foto
    Посетитель 18 сентября 2013 20:22 #
    кстати этот блок сам по себе довольно большой, его можно было просто уменьшить, и не пришлось бы прибегать к ксс фиксу от паффнутого
    0
Добавить комментарий
  • Логин
  • E-mail (не обязательно)
Повторите рисунок:
antibot
© Sander-Development. 2009-2018.
При копировании, ссылка на источник обязательна.