粘性定位与层次滚动效果的实现

粘性定位与层次滚动效果的实现实例页面

展示

去论坛 »

新闻标题1

新闻内容第1段。

新闻内容第2段。

新闻内容第3段。

新闻内容第4段。

新闻标题2

新闻内容第1段。

新闻内容第2段。

新闻内容第3段。

新闻内容第4段。

新闻标题3

新闻内容第1段。

新闻内容第2段。

新闻标题4

新闻内容第1段。

新闻内容第2段。

新闻标题5

新闻内容第1段。

新闻内容第2段。

新闻标题6

新闻内容第1段。

新闻内容第2段。

代码

HTML：

<article>
    <section>
        <h4>新闻标题1</h4>
        <content>
            <p>新闻内容第1段。</p>
            <p>新闻内容第2段。</p>
            <p>新闻内容第3段。</p>
            <p>新闻内容第4段。</p>
        </content>
        <footer>网友评论：这个新闻太夸张了吧！</footer>
    </section>
   <section>
        <h4>新闻标题2</h4>
        <content>
            <p>新闻内容第1段。</p>
            <p>新闻内容第2段。</p>
            <p>新闻内容第3段。</p>
            <p>新闻内容第4段。</p>
        </content>
        <footer>网友评论：感动</footer>
    </section>
    <section>
        <h4>新闻标题3</h4>
        <content>
            <p>新闻内容第1段。</p>
            <p>新闻内容第2段。</p>
        </content>
        <footer>网友评论：比心</footer>
    </section>
    <section>
        <h4>新闻标题4</h4>
        <content>
            <p>新闻内容第1段。</p>
            <p>新闻内容第2段。</p>
        </content>
        <footer>网友评论：赞赞赞</footer>
    </section>
    <section>
        <h4>新闻标题5</h4>
        <content>
            <p>新闻内容第1段。</p>
            <p>新闻内容第2段。</p>
        </content>
        <footer>网友评论：666</footer>
    </section>
    <section>
        <h4>新闻标题6</h4>
        <content>
            <p>新闻内容第1段。</p>
            <p>新闻内容第2段。</p>
        </content>
        <footer>网友评论：好耶！</footer>
    </section>
</article>

CSS：

article {
    position: relative;
    z-index: 0;
}
article h4, 
article footer {
    position: -webkit-sticky;  /* for Safari */
    position: sticky;
}
article h4 {
    margin: 1em 0 0;
    background-color: #333;
    color: #fff;
    padding: 10px;
    top: 0;
    z-index: 1;
}
article content {
    display: block;
    background-color: #ffffe0;
    position: relative;
    padding: 5px 10px;
}
article footer {
    background-color: #cd0000;
    color: #fff;
    padding: 10px;
    bottom: 50vh;
    z-index: -1;
}