Question

我想创建一个目标网页。滚动时，每个部分都应粘性。当下一部分也应该是粘性的，但要超过其父部分。

我发现大量的jquery插件使内容变得棘手（例如fixTo）。这里的问题是，第一部分总是在顶部（无论我给标签的z-index是什么）。但我希望第一部分落后于第二部分 - 希望你知道我的意思......

Answer 1

您是否为两个div标签设置了z-index？

CSS

div1
    {
        position:fixed;
        top:0px;
        right:0px;
        width:100px;
        z-index:1000;
    }

div2
    {
        position:fixed;
        top:0px;
        right:0px;
        width:100px;
        z-index:1001;
    }

经过测试并且有效，第二个div位于第一个div之上。

Answer 2

好的，感谢skibbi_bizzle提示。解决方案是给所有部分一个负zindex，从最低部分开始。这是代码：

HTML：

<article id="main">
    <section class="wrapper" name="top" id="section-0">
         <h2>Top section</h2>

        <p>section content</p>
    </section>
    <section class="wrapper style1" name="section-1" id="section-1">
         <h2>First section</h2>

        <p>section content</p>
    </section>
    <section class="wrapper style2" name="section-2" id="section-2">
         <h2>Second section</h2>

        <p>section content</p>
    </section>
    <section class="wrapper style3" name="section-3" id="section-3">
         <h2>Third section</h2>

        <p>section content</p>
    </section>
    <section class="wrapper style4" name="section-4" id="section-4">
         <h2>Fourth section</h2>

        <p>section content</p>
    </section>
</article>

CSS：

#main {
    margin-top: 70px;
}
/* Wrapper */
 .wrapper {
    padding: 5em;
    color: inherit;
}
.wrapper.style1 {
    background: #aaa;
}
.wrapper.style2 {
    background: #bbb;
}
.wrapper.style3 {
    background: ccc;
}
.wrapper.style4 {
    background: #ddd;
}
section {
    width: 100%;
}
#section-0 {
    z-index: -10;
}
#section-1 {
    z-index: -9;
}
#section-2 {
    z-index: -8;
}
#section-3 {
    z-index: -7;
}
#section-4 {
    z-index: -6;
}

JS：

$(document).ready(function () {
    $("#section-0").fixTo("#main");
    $("#section-1").fixTo("#main");
    $("#section-2").fixTo("#main");
    $("#section-3").fixTo("#main");
    $("#section-5").fixTo("#main");
});

滚动时粘性部分，但由下面的部分覆盖

2 个答案: