WEB лаборатория DLE » Другое для WEB » jQuery и JavaScript » StickyMojo - липкий сайдбар
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 2
    Пользователей: 0
    Гостей: 2


    Последние комментарии
    ...
    HI-tech:
    0

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

    Автор: Robot_DLElabкатегория: Другое для WEB » jQuery и JavaScriptдата: 25-02-2013, 22:48
    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>



    Скачать бесплатно

    Теги: StickyMojo, jQuery, липкий сайдбар

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.