Internet Explorer Jumpy Scrolling

Question

I have this code to keep a heading element at the top of another element that scrolls.

It works perfectly in Firefox and Google Chrome however in IE it's excruciatingly jumpy. The code itself is very simple and I can't think how to potentially improve it.

In Chrome and Firefox the heading sits at the top permanently still all the time, however in IE it jumps around like a small child that got hold of the bag of sugar.

I can't change the HTML layout because of the JQueryUI sortable functionality I'm using

Anyway, here's the code:

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

You could just use position: fixed and don't set the top property so that it's fixed relatively.

like this:

https://jsfiddle.net/0va4dn0q/42/

Answer 2

Can we change the HTML structure INSIDE the sortable container? I really want to get the scrollbar inside the .main div, so it is next to the area that actually scrolls.

To do this, I created a new main-window class, gave it a height of 180px (200 - 20 for the header), moved the overflow from container, and removed the 20px padding from main, and it seemed to work:

$('.sortable').sortable({
    handle: '.header',
    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;
    position:relative;
}
.main-window {
    height:180px;
    overflow-x:hidden;
    overflow-y:scroll;
}
.header {
    cursor:move;
    background-color:orange;
    height:20px;
    text-align:center;
    line-height:20px;
}
.main {
    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-window">
            <div class="main">hello<br/>hello<br/>hello<br/></div>
        </div>
    </div>
    <div class="container">
        <div class="header">Header 2</div>
        <div class="main-window">
            <div class="main">bye<br/>bye<br/>bye<br/></div>
        </div>
    </div>
</div>
<div class="sortable">
    <div class="container">
        <div class="header">Header 3</div>
        <div class="main-window">
            <div class="main">splurge<br/>splurge<br/>splurge<br/></div>
        </div>
    </div>
    <div class="container">
        <div class="header">Header 4</div>
        <div class="main-window">
            <div class="main">lorem ipsum<br/>dolor<br/>sit<br/></div>
        </div>
    </div>
</div>

And, besides the fact that the scrollbars are now below the headers and the headers now extend all the way to the next one, should work. You may or may not have some styling cleanup to do, but the scrollbars now act like you want them to without JavaScript.

Answer 3

The header should be outside of the container, while the container should have a margin-top of 20px, see fiddle

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