Question

我正在测试新位置：粘性功能，但似乎不起作用。

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/

Answer 1

position: sticky要求您指定top或bottom CSS属性，以确定粘性元素应该开始粘贴的位置/时间。您还应指定前向兼容性的非供应商前缀值（在这种情况下，似乎是必需的，至少在Chrome 30.0.1599.101上）。

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

position: sticky;
top: 0;

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

位置：JS Fiddle中的粘性示例

1 个答案: