更改父滚动上子元素的边距会使子元素在 IE9 中闪烁

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;
}