滚动时，Div落后于固定div

Question

我的财产状况有问题：修复。 如果你看看我的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"); 
        }
    });
});

所以，基本上，任何关于如何解决这个问题的想法？

提前致谢。

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选择器，它基本上是指.stick之后的.text，但我建议你将.text放在pageWrapper中，然后使用.stick .text

Answer 2

当然div将跳转为position:fixed从流中获取元素。 如果你的标题有静态高度而不是调整你的css文件中header.stick + div填充（或边距），否则在添加/删除'stick'类时重新计算它