3DM-студия
» » » StickyMojo - липкий сайдбар

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

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>



Скачивание доступно только для зарегистрированных
НАШИ НОВОСТИ
Опубликовано 04 апрель 2014
Представляю вашему вниманию шаблон онлайн кинотеатра с глубокой настройкой под свои нужны OST-ARENA.RU Читать далее...
Опубликовано 18 март 2014
Представляю вашему вниманию, адаптивный новостной шаблон Reades News. Адаптивный дизайн подразумевает, что шаблон будет одинаково корректно отображаться во всех устройствах. Шаблон отлично подойдет для медийных новостей и не только. Обязательно посмотрите видеозапись работы Читать далее...
Опубликовано 16 март 2014
Дизайн Zerotheme, адаптирован для DLE 10.1 by Yurets. Шаблон zBoomMusic позиционируется как шаблон для музыкального портала или музыкального блога. Вверху шаблона расположен слайдер, под слайдером Топ новостей, далее последние добавленные новости. Читать далее...