I have a problem with the sticky menu.
When scrolling the page down the menu as it jumps (sharp sticking).
How can i do to sticking smoothly?
This problem also occurs on mobile devices.
Add a comment
|
1 Answer
at the instant the sticky event occurs, the navbar is removed from the page content and affixed at page top. If the navbar is 50px high, suddenly removing it from page content will cause the remainder of the page content to jump up 50px.
The solution is to wrap the navbar in a 50px container div, and exclude the new container div from the affix call. At affix, the new container div simply serves as a placeholder that prevents "content jump".
Another type of "jumpy" problem occurs when the affix parameters are improperly set. If you have a 100px high header above a 50px high navbar, you should set the affix parameter to 100px. Doing so will cause the navbar to affix at page top each time the page is scrolled up 100px. This is the "smooth" look that you want.
If you mistakenly set the affix parameter to occur at 50px, then the navbar will jump to top each time the page is scrolled up 50px, causing this other type of "jumpy problem".
On a responsive page that permits variation in header height, things can get tricky.
