Script to fix sidebar on a certain scroll length to save white space

[Historical Forums User]

Hi guys,

I’m currently creating a blog with a side-bar, the pages will be long as there will be a lot of content and pictures. I’d like to create an effect like this site: http://www.kayture.com/ where their side-bar becomes fixed after a certain point so the side-bar never leaves a load of white space when you scroll beyond it.

Any good scripts for this?

Thanks

[dyr]

Did you search? Chris has an article himself on how to do this: https://css-tricks.com/scrollfollow-sidebar/

There are also two recent threads that address the same effect: https://css-tricks.com/forums/topic/fix-each-div-to-top-on-scroll/ https://css-tricks.com/forums/topic/floating-sidebar-links/

Not to mention about a thousand articles and tutorials that go into a lot more detail: http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/ http://blog.teamtreehouse.com/building-a-jquery-sticky-sidebar-navigation-menu http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/ http://spoiledmilk.com/blog/sticky-sidebar/

Stack Overflow discussion: http://stackoverflow.com/questions/9658002/how-to-create-a-fixed-sticky-sidebar-in-css-js

Here’s a plugin that will do it for you: http://stickyjs.com/ And the original: http://imakewebthings.com/jquery-waypoints/ Usage: http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/

In the future you might use something similar to:
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

I’m not going to do this for everyone so consider yourself lucky. :)

TL;DR http://www.google.com

[Historical Forums User]

Thanks for you suggestions, I’m aware of most of the above. I asked for further information because my request is a little different. I want to have the same functionality as the site mentioned in my previous post. You will see that the bottom boxes of the side bar fix themselves at the bottom of the screen to prevent a load of white space, then when you reach the footer they un-fix themselves. I can’t fix the whole sidebar as it won’t all fit in the screen.

Any idea on how I can do that? Perhaps with waypoints?

Thanks again

[dyr]

It just gets pinned to the top and then pinned to the bottom once you’ve scrolled far enough down. The principle is the same as any one of the articles I linked except instead of copy/paste you’ll have to do some, DEAR GOD, programming yourself.

For the lazy:
http://www.waypointarts.com/blog/2013/06/29/fixing-a-side-bar-while-scrolling-until-bottom

[Historical Forums User]

Hi again, I’ve just spent the past 2 hours trying to get this to work with waypoints. The link above only works if the side nav’s height is shorter than than the windows height, which my side nav will not be (it’s quite long). I’m racking my brains on how to do it this way. Again, please refer to the example at http://www.kayture.com/ they have a long side nav. I’d really appreciate some advise on how to do it for side navs with a height larger than the window height.

Thanks again

[dyr]

Would you mind posting a codepen with a case that matches this and I’ll see what I can do.

[Author]

Posts