代码之家 › 专栏 › 技术社区 › Denver Dang

滚动时Div位于固定Div之后

fixed css-position position css javascript

Denver Dang · 技术社区 · 12 年前

我的房产位置有问题:已修复。如果你看看我的 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"); 
        }
    });
});

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

提前谢谢。

2 回复 | 直到 12 年前

Jonas Grumann 12 年前

这是因为黑色标题从框流中跳出来,所以下面的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