hearer fixed on top

by lemon kazi

HTML

<body>
        <div id="scroller">Some controls</div>
</body>

CSS

body{
    height:1000px;
    margin:0;
    padding:0;
    position:relative;
}
#scroller {
    position: absolute;
    left: 0;
    top: 84px;
    width: 100%;
    z-index: 30;
    background:#CCC;
    height:20px;
}
#scroller.is-sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 9px;
    margin-top: -31px;
    height: 53px;
    z-index: 701;
    background: #CCC;
    opacity: .97;
    filter: alpha(opacity = 97);
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}

JavaScript

$(window).load(function(){
    $(window).scroll(function(){
        if($(window).scrollTop()>0){
            if( ! ($('#scroller').hasClass('is-sticky'))) {
                $('#scroller')
                    .addClass('is-sticky')
                    .css('top',9)
                    .animate({
                    'top': 84
                },'1000');
            }
                
             
           
        } else {
            if($('#scroller').hasClass('is-sticky')) {
                $('#scroller')
                    .removeClass('is-sticky')
                    .css('top',9)
                    .animate({
                    'top':84
                },1000);
                 
             }
        }
    });
});