6 470 Скрипты / Layout

StickyMojo - липкий сайдбар


StickyMojo - плагин для создания "липкого" сайдбара. Легкий, быстрый и гибкий, совместим с firefox, chrome, safari и IE8+.

HTML

По минимуму структура html должна выглядеть следующим образом:

<div id="wrapper">
 
    <div id="header">
        Шапка
    </div>
    <div id="sidebar">
        Сайдбар
    </div>
    <div id="main">
        Контент
    </div>
 
</div>
<div id="footer">
    Футер
</div>

CSS

При создании css создатели плагина старались сделать его, как можно более гибким. Однако следует придерживаться следующих основных правил:

  • Можно использовать любой ID, но div сайдбара и div основного контента должны находиться внутри div-оболочки (wrapper)
  • Оболочка (wrapper) должна иметь ширину
  • Сайдбар должен иметь свойство float:left (в случае расположения слева) или float:right (в случае расположения справа)
  • Сайдбар должен иметь отступы сверху и снизу - margin-top и margin-bottom, когда сайдбар начинает прилипать и когда начинает отлипать.

JS

Подключаем jQuery библиотеку и плагин:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="stickyMojo.js"></script>

Теперь инициализируем плагин:

<script>
    $(document).ready(function(){
        $('#sidebar').stickyMojo({footerID: '#footer', contentID: '#main'});
    });
</script>
Скачать 1369Загрузок 2,86 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи