Div отстает от фиксированного div при прокрутке

У меня проблема со свойством position:fixed. Если вы посмотрите мой jfiddle, вы увидите, что при прокрутке черный элемент div попадает вверху, а затем через JS он добавляет стиль «палка», который фиксирует его положение - как и предполагалось. К сожалению, когда я делаю это, и div получает фиксированный стиль, div под черной полосой немного подпрыгивает, что разрушает идею.

Основной CSS, на который, я думаю, вам стоит обратить внимание:

.orangeContent {
max-width:960px;
width:100%;
margin:0px auto;
padding:40px 0px 0px 0px;}

    header {
max-width:1920px;
width:100%;
margin:0px auto;
padding:0px;
background:#ffffff;

.stick {
position:fixed;
top:0px;
box-shadow:0px 4px 2px -2px #b32f01 ;
transition-duration:0.2s;}

И, конечно же, Javascript:

    $(document).ready(function() {
    var s = $("header");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();

        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});

Итак, в принципе, есть идеи, как это исправить?

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


javascript css css-position position fixed
person Denver Dang    schedule 12.09.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Это связано с тем, что черный заголовок выскакивает из потока блока, поэтому div внизу выскакивает вверх. Я предлагаю вам добавить исправление класса в pageWrapper вместо самого заголовка, а затем в вашем css:

.pageWrapper header{
    position: static
}

.pageWrapper div { /* the one with all the lorem ipsum */
    padding-top: 0;
}

.pageWrapper.stick header{
    position: fixed
}

.pageWrapper.stick div { /* the one with all the lorem ipsum */
    padding-top: 20px; /* needs to be set as the same height of the header */
}

Я отредактировал вашу скрипку, чтобы показать вам, что я имею в виду.

http://jsfiddle.net/AyLNL/3/

Я использовал селектор .stick + .text, который в основном означает .text после .stick, но я предлагаю вам поместить .text внутри pageWrapper, а затем использовать .stick .text

person Jonas Grumann    schedule 12.09.2013

arrow_upward
0
arrow_downward

Конечно, div будет прыгать, когда position:fixed берет элемент из потока. Если ваш заголовок имеет статическую высоту, отрегулируйте отступы (или поля) header.stick + div в вашем файле css, в противном случае пересчитайте его при добавлении/удалении класса 'stick'

person Sergey Kochetov    schedule 12.09.2013