javascript - Internet Explorer 跳动滚动

Question

我有这段代码可以将标题元素保持在另一个滚动元素的顶部。

它在 Firefox 和 Google Chrome 中完美运行，但在 IE 中却非常不稳定。代码本身非常简单，我想不出如何改进它。

在 Chrome 和 Firefox 中，标题一直固定在顶部，但在 IE 中，它像捕获糖袋的 child 一样跳来跳去。

我无法更改 HTML 布局，因为我正在使用 JQueryUI sortable 功能

无论如何，这是代码:

http://jsfiddle.net/0va4dn0q/8/

$('.container').scroll( function() {
    var fromTop = $(this).scrollTop(),
        Header = $(this).find('.header');
    Header.css('margin-top', fromTop + 'px');
});

$('.sortable').sortable({
    connectWith: '.sortable',
    placeholder: 'ui-state-highlight'
});

div {
   width:300px; 
}
.sortable {
    float:left;
    margin:3px solid red;
    min-height:200px;
}
.container {
    height:200px;
    overflow-x:hidden;
    overflow-y:auto;
    position:relative;
    cursor:move;
}
.header {
    position:absolute;
    top:0;
    background-color:orange;
    height:20px;
    text-align:center;
    line-height:20px;
}
.main {
    padding-top:20px;
    color:white;
    background-color:black;
    height:1000px;
}
.ui-state-highlight {
    height:200px;   
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="sortable">
    <div class="container">
        <div class="header">Header 1</div>
        <div class="main">hello<br/>hello<br/>hello<br/></div>
    </div>
    <div class="container">
        <div class="header">Header 2</div>
        <div class="main">bye<br/>bye<br/>bye<br/></div>
    </div>
</div>
<div class="sortable">
    <div class="container">
        <div class="header">Header 3</div>
        <div class="main">splurge<br/>splurge<br/>splurge<br/></div>
    </div>
    <div class="container">
        <div class="header">Header 4</div>
        <div class="main">lorem ipsum<br/>dolor<br/>sit<br/></div>
    </div>
</div>

Answer 1

标题应该在容器之外，而容器应该有 20px 的边距，参见 fiddle

 <div id="header">Header</div>
 <div id="container">
    <div id="main"></div>
 </div>