Как зафиксировать элемент на странице со скроллом?

.header {
position: fixed;
width: 100%;
height: 60px;
left: 0px;
top: 0px;
}

вот еще jquery скрипт который после прокрутки на 100px добавляет класс .header-script в котором уже заранее будет прописан position: fixed;, он нужен для того если тебе не сразу надо зафиксировать блок, а после прокрутки на оперделенное количество пикселей

<script type="text/javascript">
                $(function(){
                $(window).scroll(function() {
                    var top = $(document).scrollTop();
                    var height1 = $(document).height()-$(window).height()-100;   
                    var result =  $(document).scrollTop();
                   if(result  > height1   )  
                           // $(".header").fadeOut(100);
                    if(result  < height1   )  
                           $(".header").fadeIn(300);
                    if (top < 100)
                    {
                        $(".header-top-inner").removeClass("header-script");
                    }
                    else
                    {
                        $(".header-top-inner").addClass("header-script");
                    }
                });
            });
        </script>