ЛИПКИЙ HEADER

ЛИПКИЙ HEADER


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

HTML разметка
<div id="container">
    
    <h2>Липкий хедер на jQuery</h2>
    
    <div id="header">
        <!-- липкий хедер -->
    </div>
    
    <div id="content">
        <!-- контент -->
    </div>
    
</div><!-- /container -->


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>


Скачать исходник:
Скачать файл: Desktop.rar [7,13 Kb] (cкачиваний: 17)
0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.