Прилипающее меню сайта средствами jQuery

Вы наверное еще помните времена, когда популярные сайты, такие как Yahoo, Mail.ru и многие другие, предлагали вам установить дополнительную панель в вашем браузере. Многие разработчики бесплатных программ зарабатывают тем, что устанавливают такие панели вместе со своими программами. В большинстве случаев эти панели мало используются, а только занимают и так небольшое вертикальное пространство экрана вашего компьютера.

В последнее время снова появилась тенденция создавать панели в браузере (Например Google, Wordpress и даже Facebook), но только в отличие от панелей, которые встраивались в панель инструментов браузера, теперь создается прилипающее меню, используя веб технологии в саму веб страницу. Главным отличием теперешних панелей является то, что они упрощают навигацию посетителя по сайту, хорошо вписываются в дизайн веб страницы и появляются только на том сайте, для которого они создавались.

Как создать прилипающее меню в Drupal

Теперь, я думаю пришло время создать такую панель самому, так как ее использование упростит навигацию пользователей на сайте и тем самым поднимет его в глазах посетителей и поисковых систем.

До недавнего времени можно было создать панель средствами CSS, но в этом способе был один недостаток - эта панель постоянно висела сверху. Это конечно удобно, когда панель всегда на виду, но та панель, которую мы с вами рассматриваем, гораздо удобней интегрируется с дизайном сайта, ее можно располагать не только вверху страницы, а и под заголовком окна.

Изначально, daneden.me написал превосходное решение, использующее CSS и реализующее то что нам нужно:

$(document).ready(function(){
     function sticky() {
      var y = $(window).scrollTop();
      if( y > (60) ){
          $('.postnav').css({
              'position': 'fixed',
              'top': '0',
              'left': ($(window).width() -$('.container').width())/2 - 10
          });
      } else {
          $('.postnav').removeAttr('style');
      }
     };

     $(window).scroll(sticky);
     $(window).resize(sticky);
    });

В этой функции все хорошо, только не хватает одного - гибкости. Поэтому данную функцию следует немного подправить, для того, чтоб она учитывала высоту заголовк окна, а также если уже имеются другие панели инструментов, например в Drupal. Следующую функцию я кастомизировал под свой сайт, использующий CMS Drupal в качестве бэкенда. Для других CMS процедура должна выглядеть аналогичным образом.

jQuery(document).ready(function($){

function sticky() {
    var y = $(window).scrollTop();
    var top = '0';

    // проверяю есть-ли такая панель. Если да - переменной
    // top присваиваю высоту этой панели
    if($('#toolbar').length > 0)
    {
        top = $('#toolbar').height();
    }

    if( y > $('.header-top').height() + $('#toolbar').height() + 12 ){
      $('.navigation').css({
        'position': 'fixed',
        'top': top,
        'width': $('#page').width(),
        'z-index': '900',
        'background-color' : '#fff',
      });
      $('#main').css({
        'padding-top': $('#nav-header').height()
       })
    } else {
      $('.navigation').removeAttr('style');
      $('#main').removeAttr('style');
    }
  };

  $(window).scroll(sticky);
  $(window).resize(sticky);
 
 })

В принципе все. Данную функцию нужно добавить в файл темы вашего Drupal сайта и перезагрузить страницу.