Smooth Element Placement on Scroll - jQuery

Question

On my website, the content of the side bar is, for most time, shorter than the main content.

I'd like to have "reduce" the scroll rate of that element only so that the top part of it is align with the top of the page and the bottom with the bottom of the page when the page is fully scrolled.

Things are working as I want them to be in Firefox, but Chrome and IE show this annoying jump when the mousewheel is used to scroll.

I have done some variable caching to optimize the script, but it did not help (or barely).

You can have a look at it here:

http://www.pastottawa.com/lastest/

Thanks,

Answer 1

Your issue is that you're trying to replicate CSS functionality with other CSS functionality. Instead of having #rightSideBar positioned relatively and setting the top value to a value based on the distance from the top of the page to show in the viewport, your should be doing this:

#rightSideBar {
    position:fixed;
    right: 20px;
    top: /* set this value with Javascript */
}

This feature of CSS fixes the position of an element to the viewport, where you specify, so all you need to do is set how far from the top of the user's browser's viweport your want your element to appear. This will not be a value from the top of the page, but instead the number of pixels from the top of their window, regardless of its size, position or content.