滚动时，Div 落后于固定 div答案

【问题标题】：Div is going behind fixed div when scrolling滚动时，Div 落后于固定 div
【发布时间】：2013-09-12 11:52:55
【问题描述】：

我的属性位置有问题：已修复。如果你查看我的 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"); 
        }
    });
});

那么，基本上，你知道如何解决这个问题吗？

提前致谢。

【问题讨论】：

标签： javascript css position css-position fixed

【解决方案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

【讨论】：

【解决方案2】：

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

【讨论】：