Coding Help with navigation bar

[featherstone 69]

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?

[Arceus 1,081]

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.

[featherstone 69]

Eventually I both added lots of content in the footer and changed the bar's position to absolute (so it does not "jump" when it turns to "fixed"). Thanks!