Internet Explorer Buggy CSS左

Question

I have a html page where I want a div to scroll vertically with the page but not horizontally (rest of the content to disappear under it);

From a previous question I found a good answer to this, however I was wondering if there was a way to fix a small bug.

http://jsfiddle.net/nkgsqc1o/

When scrolling left using either the scroll bar's arrow or the arrow keys on the keyboard, the green box goes all spazzy trying to keep up. This doesn't occur in Firefox.

I am wondering if its the jquery code (below) or Internet Explorer itself?

$('#Container').scroll(function() {
    $('#Const').css('left', $('#Container').scrollLeft());
});

I have tried playing with jquery's animate but it does much the same. I have also tried playing with the "smooth scrolling" setting inside Internet Explorer but that didn't help either.

Answer 1

Please check this fiddle . I have removed jquery and simply used CSS. Hope that helps.

 div.Container{ height: 300px; border: 2px solid #F00; width: 800px; padding: 3px; overflow: auto; /* POSITION */ position:fixed; z-index : 1; } div.Const{ border: 2px solid #0F0; width: 200px; height: 250px; float:left; position:fixed; overflow-y:hidden; z-index : -1; } div.Main{ border: 2px solid #00F; width: 3000px; height: 200px; margin-left: 220px; top:0px; float:left; z-index : 1; } 

 <div id="Container" class="Container"> <div id="Const" class="Const"> </div> <div id="Main" class="Main"> </div> </div>