scroll event fires when size of div changes via script in Chrome, but not IE9

Question

fiddle: http://jsfiddle.net/Xc3ud/4/

in Chrome, when the size of the content box changes via script, it calls a scroll event and gets rid of my scroll helper div.

in IE9, it does not fire this scroll event, so the scroll helper div is stuck on the page and won't go away because the page isn't scrolled, but it won't be able to trigger scroll now because content has changes

how can I trigger the update in IE9?

I'm using Durandal so this is a SPA

html:

<div class="page">
    <div class="scrollerfade" style="display:none;">This div shows up when you are scrolled down, and should disappear when you scroll back to top<br/>click the green content box to toggle its height (no longer needs scrolling)</div>
    <div class="content">scroll down to see the red box</div>
</div>

js:

var $fade = $('.scrollerfade');
$(window).on('scroll', function () {
    $fade.toggle(($(window).scrollTop() > 0));
});
$('.content').on('click',function(){
    $(this).height(($(this).height()>200)?200:2000);
});

Answer 1

had to solve this with a Durandal event

if anyone has a resolution that DOES NOT use a Durandal event that would be a better answer I think, and would work even if you weren't using Durandal

//fix for IE9, because the final scroll event is not fired when the page size changes
_i.router.on('router:navigation:composition-complete').then(function (instance, instruction, router) {
    $fade.toggle((_i.$(window).scrollTop() > 0));
});