Set div height on scroll (rubber band effect in IE)

Question

In my current Project, the expected behavior of our navbar is that it behaves like a positioned fixed navbar without using css-attributes like position and/or fixed. I've played around with lots of ideas and finaly came up with a very simple solution.

HTML:

<div style="border:1px solid red;display:inline-block;">
    <div id="nav-scroll-helper"></div>
    <div style="display:inline-block;">Navigation</div>
</div>
<div style="float:right;height:10000px;border:1px solid blue;display:inline-block;">Content</div>

JS

$(window).scroll(function () {
    $("#nav-scroll-helper").animate({
        height: $(document).scrollTop()
    }, 0);
});

...and on jsfiddle: https://jsfiddle.net/ej8hwu09/5/

The Problem is, that it works great in firefox and chrome but in IE i've noticed a rubber band effect. If you scroll down, the navbar "follows" the scroll-down instead of running parallel to the scroll event.

Any advice would be greatly appreciated!

EDIT:

Navigation and content are parts of bootstraps grid layout. If i use the positioning property, the layout gets broken. I've also tried velocity to change the height attribute. Same result in IE.

Answer 1

I can reproduce the issue in IE. It's a performance thing. I think Chrome and Firefox do their repaints better. Maybe IE tries to repaint twice, once after the scroll happened, and then again after you've repositioned the element. So maybe it's a case of an over-eager repaint :P The .animate might also add a minor delay.

If your aim is just to position the navigation in the top left you can use:

#nav-scroll-helper { position: fixed; top: 0; left: 0; }

This allows the browser to optimize repaints when scrolling, it wont need to redraw that element so the 'rubber band' effect will not occur.