Reputation: 9621
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?
Upvotes: 0
Views: 1273
Reputation: 5580
Add a position : relative
to your #sidebar
.
z-index
only works when position is not static
.
Upvotes: 2