更改父滾動上的子元素的邊距使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

使用動畫的方法而不是CSS方法：

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

但它可以只用CSS來實現這樣的：

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