Automatically scrolling past fixed navigation while linking within the same page

[Paulin]

I have what I expect is a very simple problem to fix, but my Javascript / Jquery skills are almost nonexistant; I’ve studied and experimented, but my brain just cannot wrap around how to make this stuff work.

I’m building a fairly straight forward website using the Twitter Bootstrap framework. There’s no CMS or PHP. Just plain HTML and CSS (with the exception of this bit of JQuery I need).

I have a fixed horizontal navigation across the top of the page.

The page layout is two colums: a left navigation sidebar and a large content area. The sidebar links all point to the ids of the header tags in the content area. In other words, there are no external links; I’m linking to various sections within the same page.

My only problem is that when you click a link, the content is cut off by the fixed navigation. I would like to have the page automatically scroll up a specific number of pixels so that the fixed navbar is not covering the content. How can this be accomplished? Most of the solutions I’ve found online include animating the scroll – I don’t need animation. Just shifting the position of the page a bit.

I started this project a few months back (just something I’m doing in my spare time). JQuery 1.7.1 was bundled with Bootstrap. Any help would be appreciated. I’ve spent the last hour or two trying to find a solution, but nothing I’ve tried has worked at all (probably because I’m implementing it all wrong).

Thanks….

[Paulie_D]

It’s difficult to help without a link but this “I have a fixed horizontal navigation across the top of the page.” is your problem.

You’ve told the navigation to stay fixed regardless of what the content does…so it does.

My suggestion is to have the navbar sit on top of the content column ONLY and then everything should work as you expect. I wouldn’t go the fixed number of pixels route as you will have to update those numbers every time you update the content.

At best, I would see if you can ask someone here to help you out with a little jQuery to scroll to the anchor and then scroll back a set number of pixels to allow for the height of the navbar. If you see what I mean.

[Paulin]

“At best, I would see if you can ask someone here to help you out with a little jQuery to scroll to the anchor and then scroll back a set number of pixels to allow for the height of the navbar. If you see what I mean.”

This is exactly what I’m trying to accomplish. The number of pixels doesn’t need to change; it would be “x” pixels from the anchor. I’d actually like for the links to set the content a ways past the navigation (rather than only accounting for the exact height of the navigation).

I realize that the fixed navigation is my problem, but I would like to keep it if at all possible.

I was experimenting with this Jquery: https://github.com/kswedberg/jquery-smooth-scroll

It sounds like it should do what I’m looking for (plus animation; I don’t need animation, but if it’s a side-effect of making it work I won’t complain), but I couldn’t figure out how to implement it.

[enjay]

I think you should check out this tutorial, may be able to help you. http://www.freetutorialsplus.com/web-design-development/javascript/create-a-sticky-navigation-header-using-jquery-waypoints/

[galaakk]

Hi Paulin, I’m no expert at all but I resolved a similar problem for me so I hope this will help. I use the smooth scroll plugin. Every time I clicked it used to go precisely at the target #id point, but I wanted it to do “go to there but stop 20px before”. For that you have to declare an “offset” variable in the plugin, they have the documentation for that.

[Author]

Posts