Question

我有一个元素，我想坚持其父容器的顶部。父容器是可滚动的，粘性元素的兄弟应该滚动。

<div class="parent">
    <div class="fixed">
        <p>
            I shouldn't scroll, you know
        </p>
    </div>
    <div class="scrollable">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
        </ul>
    </div>
</div>

CSS：

.parent
{
    border:1px solid #ccc;
    margin:20px 0;
    max-height:300px;
    position:relative;
    overflow:auto;
}

.fixed, .scrollable
{
    display:inline-block;
    vertical-align:top;
}

.fixed
{
    background:rgba(0, 0, 0, 0.1);
    padding:10px;
    text-align:center;
    width:20rem;
}

.scrollable
{
    padding:10px;
}

滚动父级时粘性元素保持不变，但在IE9中闪烁。这是我的jQuery代码：

$(function(){
    $('.parent').scroll(function(e){
        $(this).find('.fixed').css('margin-top', $(this).scrollTop());
    });
});

这里是jsfiddle。如何删除IE9中的闪烁？谢谢！

Answer 1

使用animate方法代替css方法：

$(this).find('.fixed').animate({'margin-top': $(this).scrollTop()},1);

但是可以用这样的css来完成：

.fixed{
position: fixed;
top: 0;
left: 0;
width: 350px;
height: 200px;
}

在父卷轴上更改子元素的边距会使IE9中的子项闪烁

1 个答案: