Question

If you go here, while scrolling down the page you will notice that the right panel containing shopping and categories is moving along also…

I use this script for this:

 $(function () {
    var btn = $('.scroll');
    var btnPosTop = btn.offset().top;
    var win = $(window);
    win.scroll(function (e) {
        var scrollTop = win.scrollTop();
        if (scrollTop >= btnPosTop) {
            btn.css({ position: 'fixed', top: 10, marginTop: 0, 'z-index': 1, width: '260px'});
        } else if (btn.css('position') === 'fixed') {
            btn.css({ position: '', top: '', marginTop: '0px', 'z-index': 0 });
        }
    });
});

All works nice except that in IE 9, the div is no longer shown while scrolling down(oh, right, it is there but is not visible).

As you can notice, I’ve even tried to use z-index in the above script hoping that this will fix the issue, but it’s in vain.

Can you guys suggest a solution?

Answer 1

Add a position : relative to your #sidebar.

z-index only works when position is not static.