12 дек 2012
jQuery Sticky Header
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно jQuery Sticky Header .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
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>



Внимание! У вас нет прав для просмотра скрытого текста.










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
spamdostalblin | 15 декабря 2012 03:55 | (0|0)
  • Группа: Посетители |
  • Комментарий: 1 (ссылка)

Спасибо! Это то, что мне нужно.

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