Top fixed menu with horizontal scroll in IE

Question

I've created top menu bar with horizontal scroll, the top property is being set via JS:

$(document).on('scroll', function() {
    $('#headers').css('top', $(this).scrollTop());
});

The problem is when I'm scrolling the page vertically in IE, menu bar is trying to scroll too and it doesn't look good. Any ideas to fix that?

JSFiddle demo

Answer 1

does this give you the desired output?

#headers {
  overflow: hidden;
}

Answer 2

Working Example: http://jsfiddle.net/khristopherallen/f15vybt7/

If you change your #headers to a fixed position, then the jQuery should not be necessary. You then just need to add some margin to the top of your page so the content doesn't start under the header.

#headers {
    background-color: #333;
    margin: 0px 0px 0px 0px;
    top: 0;
    left:0;
    width: 100%;
    z-index:600;
    position: fixed;
}