Плавающий сайдбар — плагин StickyMojo
Плагин StickyMojo позволяет реализовать плавающий блок или сайдбар.
Как реализовать:
1. Разметка html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="wrapper"> <div id="header"> Шапка </div> <div id="sidebar"> Сайдбар </div> <div id="main"> Контент </div> </div> <div id="footer"> Футер </div> |
2. Стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
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; } |
При создании css создатели плагина старались сделать его, как можно более гибким. Однако следует придерживаться следующих основных правил:
— Можно использовать любой ID, но div сайдбара и div основного контента должны находиться внутри div-оболочки (wrapper)
— Оболочка (wrapper) должна иметь ширину
— Сайдбар должен иметь свойство float:left (в случае расположения слева) или float:right (в случае расположения справа)
— Сайдбар должен иметь отступы сверху и снизу — margin-top и margin-bottom, когда сайдбар начинает прилипать и когда начинает отлипать.
— Оболочка (wrapper) должна иметь ширину
— Сайдбар должен иметь свойство float:left (в случае расположения слева) или float:right (в случае расположения справа)
— Сайдбар должен иметь отступы сверху и снизу — margin-top и margin-bottom, когда сайдбар начинает прилипать и когда начинает отлипать.
3. Подключаем наш плагин и библиотеку jQuery
|
1 2 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="stickyMojo.js"></script> |
Ну и включаем наш плагин:
|
1 2 3 4 5 |
<script> $(document).ready(function(){ $('#sidebar').stickyMojo({footerID: '#footer', contentID: '#main'}); }); </script> |
Готово.
