Reply To: Menu become Fix header on scroll

[SLitweb]

Hi @Senff
When using your WP sticky menu plugin, the cloned menu container is always visible, although the window wasn’t scrolled yet..

How can I adjust it so that the cloned menu (sticky menu) is being displayed when the user has actually scolled a bit – like let’s say 100px or something like that?

I wanted to display:none; a certain menu li when sticky menu is visible, because that li links to an offpage container that is sliding in once the link is clicked. I want this only to be available when the menu is the original menu ;)
However since your plugin causes my menu to be the cloned (sticky) menu at all times somehow…. even when user is at the top…

Well, any hints are appreciated!
Thanks for the plugin!

EDIT:
Managed to solve this by using the setting “Space between top of page and sticky element: (optional) “. I set it to a negative value. For example the menu container height+wpadminbar+gracespace = app. 117px
So the negative value would be -117px

Then I added a CSS rule for the cloned (sticky) menu container and fixed it at the top like so:
.cloned { top: 0 !important; }

Hit save.

Now the sticky menu will appear sightly after the user has scolled the navigation container out of view.

You could add CSS animations on the .cloned container so it slides in smoothly or something like that (use i.e. fadeInDown).

Careful: this works nicely for menu containers that are located right at the top (0px) of your website’s window.

If your menu container is located somewhere below the top limit of the window, then add this space in pixels to the negative value, if you still rather want your sticky menu to appear a bit after the user has scrolled the original out of view.