Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up
Sign in to follow this  
featherstone

 Coding Help with navigation bar

Recommended Posts

My site has a navigation bar that scrolls with the page, then it becomes fixed (like the one at the Initiative). It works almost always, however sometimes when the page has not enough length, the nav bar starts shaking up and down - not sure how else to decribe it. I tried with different heights and positioning, but it still does that. Also it does not happen all the time. Sometimes you re-open the same page (typically an empty forum, for instance) and everything is fine - it just scrolls as long as it can and then gets stuck there, with a bit of header still showing (which is fine). Any idea what the issue could be?

Share this post


Link to post
Share on other sites

Well, you pretty much just said why it does that yourself: there's not enough room. If the bar doesn't have the space to stick, it gets trapped between sticking and unsticking, and jerks like that. Other times, it just picks the best place for itself.

 

The only way of fixing it I've ever found is just making the pages longer, or making the point at which it sticks at the top taller. Ergo, if it scrolls for 250px and then sticks, make it 260 or 270. Make it a bit beyond where it'll typically get confused on short pages, so that it doesn't. A slight tweak like that shouldn't even be noticeable. If it becomes noticeable, you can always do a transition there to make the switch from static to fixed smoother.

 

Alternatively, place it higher up the page, so that it's close enough to the top of the site it only takes maybe 100px before it sticks.

 

Hopefully that makes sense, just woke up, also can't see yet. Lol

 

Oh, actually, I think, specifically what causes this is the space left behind when the bar sticks. You might be able to add a div or something that stays behind when the bar is in stick mode, to fill that space. Because what probably actually happens is that the bar moves out of place and the space it took up before is no longer taken up, getting it stuck in that cycle of sticking and unsticking; there's not enough space for it to stay sticky with it not in place anymore, but it's past its 'go into floating state' pixel count if it is static.

  • Agree 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.



×

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.