1

我正在测试新的 position:sticky 功能，但它似乎不起作用。

CSS

   .slide {
        width:300px;
        height:400px;
        border:1px solid #888;
        border-radius:8px;
        position:relative;
        overflow:auto;
    }
    .slide > ul {
        padding:0;
        margin:0;
        position:relative;
    }
    .slide > ul > li {
        min-height:20px;
        display:block;
        padding:10px;
        background:#F8F8F8;
        box-shadow:inset 0 0 3px #CCC;
        list-style:none;
    }
    .slide > ul > li.title {
        min-height:12px;
        background:#888;
        colour:#FFF;
        font-weight:bold;
        position:-webkit-sticky;
    }

HTML

<div class="slide">
    <ul>
        <li class="title">Settings</li>
        <li>General</li>
        <li>Social</li>
        <li>Search Engine</li>
    </ul>
    <ul>
        <li class="title">Privacy</li>
        <li>Personal</li>
        <li>Business</li>
        <li>Enigma</li>
    </ul>
    <ul>
        <li class="title">Settings</li>
        <li>General</li>
        <li>Social</li>
        <li>Search Engine</li>
    </ul>
    <ul>
        <li class="title">Privacy</li>
        <li>Personal</li>
        <li>Business</li>
        <li>Enigma</li>
    </ul>
</div>

小提琴http://jsfiddle.net/78kxU/3/

4

1 回答 1

1

position: sticky要求您指定 atop或bottomCSS 属性以确定粘性元素应该开始粘贴的位置/时间。您还应该为 forwards-compatibility 指定 un-vendor-prefixed 值（在这种情况下，它似乎是必需的，至少在 Chrome 30.0.1599.101 上是必需的）。

因此，换句话说，将这两行添加到您的.slide > ul > li.title样式规则中：

position: sticky;
top: 0;

这是更新的小提琴：http: //jsfiddle.net/46gpu/

于 2013-10-21T23:05:44.270 回答