12 467 Скрипты / Layout

Липкий header


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

HTML

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

CSS

Стиль для демки:

JS

Подключаем jQuery и сам код прикрепления:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/jаvascript"></script>
<script type="text/jаvascript">
    $(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>
Скачать 2278Загрузок 6,64 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи