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

Question

У меня проблема с положением свойства: исправлено. Если вы проверите мой jfiddle, вы увидите, что когда вы прокручиваете, а черный div попадает в верхнюю часть, то через JS он добавляет стиль «stick», который фиксирует его на месте - как и предполагалось. К сожалению, когда я это делаю, и 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"); 
     } 
    }); 
}); 

Так, в принципе, любая идея о том, как это исправить?

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

Answer 1

Это связано с тем, что черный заголовок выпрыгивает из потока коробки, поэтому ниже подпрыгивает 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

Answer 2

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