CODEWITHSUNDEEP
jquerywordpress
Jon
Jon

Reputation: 179

Make sidebar thats longer than browser but not longer than content that scrolls together

I've looked everywhere but I couldn't find the right solution

The sidebar is long but there's still white space when I get to the end because it's not the length of the content. So, I was thinking maybe having it 'fixed' using jquery but the thing is, is that it's still a long sidebar.. So is there a way for me to have the sidebar scroll gradually as I scroll so that it reaches the bottom of the sidebar the same time it I reach the footer?

I thought about something maybe like "(0, sidebarTop - scrollTop)" with 'sidebartop' being the position ('top' increases as you scroll so it pushes the sidebar down) but it not working right.. it's actually pushing it up

I'm a bit sleep deprived and I may not be thinking about it clear at the moment but I need to figure this out for a client due saturday..

You see how the sidebar long? (shorten your browser) -- I would like it so that the sidebar will move gradually down with the content just like this

Upvotes: 0

Views: 280

Answers (1)

antejan
antejan

Reputation: 2624

You need little extra math: http://jsfiddle.net/VEsdu/317/

scrolled = Math.min(1, (scrollTop - sidebarTop)/(ch - wh));
topPosition += scrolled * (ch - sh);

On the first line we get what part of content in the viewport - 0 for top of content at viewport top, 1 for bottom of content at viewport bottom. On the second line adding the margin to sidebar proportional to difference between content/sidebar heights.

I'm not sure this will work with viewport taller than sidebar/content or after window resize, you should check that cases.

Upvotes: 1

Related Questions