Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Joss Daniels
Joss Daniels
59,875 Points
Posted by Joss Daniels
Joss Daniels
59,875 Points

Fixed jQuery Scroll Navigation

I've made a website using the grid from the responsive design tutorials - 1000px, 12 columns.

I have the side sectioned into grid_3 for the sidebar and grid_9 for the main content and I want the sidebar to remained fixed after the user scrolls past a certain point.

I've tried a few plugins, but they aren't working. At the moment using I'm trying jsticky.js (http://www.designlunatic.com/projects/jsticky/) but when I scroll the sidebar jumps to the center of the page and the main content in grid_9 moves over to where the sidebar was instead of staying in place?

Any help would be appreciated.

4 Answers

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Have you positioned the sidebar as "fixed" and there's a cool jQuery plugin called pin it. It's in one of the last 2 or 3 Treehouse weekly videos.

Ben Russell
Ben Russell
3,667 Points
Ben Russell
Ben Russell
3,667 Points

I'm sure this should be achievable with just css. Using jquery seems overkill and extra load on the site.

Joe Bruno
Joe Bruno
35,909 Points
Joe Bruno
Joe Bruno
35,909 Points

For future projects, you may want to consider using Twitter Bootstrap. Its not perfect for every project, but its useful for many. It has that functionality and a whole lot more (including a "grid system") built into it with responsive options. Depending on what you are seeking to achieve with the implementation of your sidebar, the Bootstrap's Affix option may be useful: http://twitter.github.io/bootstrap/javascript.html

Joss Daniels
Joss Daniels
59,875 Points
Joss Daniels
Joss Daniels
59,875 Points

@Matthew - I'll have a look for this thanks. @Ben - do you mean using css3 animate properties so it only fixes once the user scrolls past a certain point? @Joe - I'll look into affix. I've looked at Bootstrap before, but I prefer to just take elements from it rather than whole thing.

Thanks!