Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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.

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

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

@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!