Навигация
Популярное
    Статистика

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

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


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

    jQuery Sticky Header

    jQuery Sticky Header


    jQuery Sticky Header - Прикрепляемый хедер к верху страницы при её прокручивании. Реализовано на jQuery.

    HTML разметка
    <div id="container">

    <h2>jQuery Sticky Header Demo</h2>

    <div id="header">
    <!-- header content -->
    </div>

    <div id="content">
    <!-- main content -->
    </div>

    </div>

    CSS
    #container {
    width: 960px;
    margin: 5em auto;
    text-align: left;
    }

    #header{
    width:958px;
    border:1px solid #ebebee;
    border-bottom:3px solid #ddd;
    background-image: -webkit-linear-gradient(top, #fff, #ebebee);
    background-image: -moz-linear-gradient(top, #fff, #ebebee);
    background-image: -ms-linear-gradient(top, #fff, #ebebee);
    background-image: -o-linear-gradient(top, #fff, #ebebee);
    background-image: linear-gradient(top, #fff, #ebebee);
    }

    #content{
    padding:10px;
    border:1px solid #e8e8e8;
    border-bottom:3px solid #e8e8e8;
    border-top: none;
    border-radius:4px;
    background:#fcfcfc;
    margin:20px 0;
    }

    javascript

    Подключаем jQuery и сам код прикрепления:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    var HeaderTop = $('#header').offset().top;

    $(window).scroll(function(){
    if( $(window).scrollTop() > HeaderTop ) {
    $('#header').css({position: 'fixed', top: '0px'});
    } else {
    $('#header').css({position: 'static'});
    }
    });
    });
    </script>



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

    Теги: jQuery

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

    • Аккордеон в стиле MetroВ данном уроке мы сделаем аккордеон в стиле Metro. Меню будет использовать jQuery и jQueryUI.
    • Лента с использвоанием тольком CSSСделаем популярный элемент, использующийся в оформлении страниц веб проектов - ленту с текстом. Для решения задачи потребуется только один HTML элемент и CSS. Никаких изображений и javascript.
    • Липкий headerПрикрепляемый хедер к верху страницы при её прокручивании. Реализовано на jQuery.
    • Хлебные крошки в стиле googleОчень симпатичные хлебные крошки в стиле сегодняшнего гугловского оформления. Протестировано во всех браузерах поддерживающих CSS3, при этом и в старых браузерах (в большинстве случаев) крошки будут
    • Кнопка на css для ucozКрасивая кнопка на css для сайта ucoz,ранее была добавленна такая только синего цвета теперь ловим красную настраиваем под себя


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