Currently, I have a scenario on my webpage where there is a div called RightSide positioned on the far right side below another div named TopBanner. The TopBanner div remains fixed at the top of the screen even when the user scrolls down, which is exactly what I desire. However, I want the RightSide div to also stay in its position under TopBanner without moving while the user scrolls.
I have managed to achieve this to some extent but it behaves oddly. As the user starts scrolling down, RightSide begins to move upwards on the page until it gets hidden behind TopBanner and then suddenly it snaps back to its fixed position and stays there for the rest of the scroll. The jQuery code responsible for this "snapping back" effect is as follows:
var stickerTop = parseInt($('#RightSide').offset().top);
$(window).scroll(function () {
$("#RightSide").css((parseInt($(window).scrollTop()) + parseInt($("#RightSide").css('margin-top')) > stickerTop) ? {
position: 'fixed',
top: '0px'
} : {
position: 'relative'
});
});
The initial behavior where RightSide moves up the page before snapping back to its correct position has been causing frustration for both my boss and our users. I have tried adjusting the 'top: '0px'' value, but that only worsens the situation.
It appears that the jQuery function responsible for repositioning RightSide does not kick in until after scrolling about a hundred pixels, causing a sudden movement of the div downwards from that point onwards.
In conclusion, my goal is to prevent any vertical movement of the RightSide div as the user scrolls. How can this be accomplished without resorting to using an iframe? Thank you.