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, когда сайдбар начинает прилипать и когда начинает отлипать.
  

body{
    margin:0;
    padding:0;
    background:#f2f2f2;
    color:#777;
}
#header {
    margin: 75px 0 50px 140px;
    text-align: center;
    text-transform: uppercase;
}
#main {
    width:748px;
    height: 748px; /* может быть любое значение, только убедитесь, что main будет выше сайдбара */
    padding: 25px;
    float: left;
    background-color: #fff;
    border:1px solid #d2d2d2;
    box-shadow:-4px 5px 11px rgba(0, 0, 0, 0.1);
    position:relative;
    z-index:1;
    margin-bottom:40px;
}
#sidebar {
    width: 118px;
    background-color: #fff;
    min-height: 200px;
    box-shadow:-3px 2px 8px rgba(204, 204, 204, 0.31);
    border-width:1px 0 1px 1px;
    border-style:solid;
    border-color:#d2d2d2;
    margin: 30px 0 15px 0; /* управляем отступами сверху и снизу */
    padding: 15px 10px;
    float: left; /* float right для расположени ясайдбара справа */
}
#footer {
    width: 100%;
    color:#f2f2f2;
    clear:both;
    background-color: #333;
    height: 100px;
    margin-top: 100px;
    text-align:center;
    padding:10px;
}
#wrapper {
    width: 940px; /* ДОЛЖЕН ИМЕТЬ ШИРИНУ = ширина #sidebar + ширина #main */
    margin-left: auto;
    margin-right: auto;
}

javascript

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

<script type="text/javascript" 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>