0

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

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

提前致谢。

4

2 回答 2

2

这是由于黑色表头跳出框流，所以下面的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

于 2013-09-12T12:00:46.590 回答
0

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

于 2013-09-12T12:01:59.577 回答