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>