Switch classes like in the Apple Store sidebar
Hi,
I'm trying to get a sidebar similar to the one on the Apple Store website and I think I have to use js for that, let me explain:
When you are going to buy an Apple Macbook Pro you get to some sort of configuration page. When you are on the top of that page, the sidebar with price-info (called Summary on the page, the div name is 'product-summary-primary') floats a couple of pixels from the top.
But when you scroll down is when the magic happens, the Summary will move along with the scrolling, but gets a fixed position as soon as it hits the top of the browser window. That's when it switches classes.
More specific:
At first the div product-summary-primary has the class 'slider-content pinned_top', but it changes to 'slider-content floating' as soon as it hits the top of the window.
That same effect is what I want to get on my website for my sidebar.
Is there anyone who can help me please achieving this? Many thanks in advance!