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

Question

[Алексей Черток]

Всем привет. Подскажите пожалуйста, как можно зафиксировать элемент на странице (шапку 100%), что бы при появлении скролла она не сдвигалась влево?

Заранее спасибо.

Answer 1

[Сергей]

.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>

Answer 2

[vdem]

.header {
    position: fixed;
}

Comments

[Алексей Черток]

Неа, не работает. Как только скрол появляется - оно все равно сдвигается влево.

[vdem]

@BarnyBroken А ссылку можно?

Answer 3

[Delfi0203]

Поддерживаю, position: fixed;