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

sticky sections while scrolling, but overlayed by the one below

本文关键字：覆盖 滚动 有粘性      更新时间：2023-09-26

我想创建一个登录页。滚动时，每个部分都应具有粘性。当下一个部分也应该是粘性的，但在其父部分之上。

我发现了大量的jquery插件，它们使内容具有粘性（例如fixTo）。这里的问题是，第一部分总是在顶部（无论我给标签什么z索引）。但我希望第一节在第二节之后——希望你知道我的意思。。。

是否为两个div标记都设置了z索引？

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之上。

好的，感谢skibbi_bizzle的提示。解决方案是从最低的开始，给所有部分都加上负锌指数。这是代码：

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");
});
相关文章：