Menu become Fix header on scroll

[Paulie_D]

>If you want me to click on your website link, am not going to do that.

Why? You ask us to click your links.

If it had been a spam link one of us mods would have removed it.

[Kitty Giraudel]

> If you want me to click on your website link, am not going to do that.

Then I guess you should stop asking for help.

On topic, my first answer was correct ; it is a `position: sticky` thing. A simple Google search from the OP would have led him where he wanted to go.

[CodeGraphics]

I dont like it when one can simply fork a codepen, he will be directing people his website for traffic purposes.

[Kitty Giraudel]

Who cares if it gives you the answer you’re looking for? It’s a win-win.

[nickvruiz]

Position: sticky; Is only webkit and will not work across all browsers so it isn’t really a useful option quite yet.

I dont like it when one can simply fork a codepen, he will be directing people his website for traffic purposes.

As long as it has what you are looking for I don’t see the problem. After all, it’s a free resource so we can’t be picky.

@Senff’s codepen was the best answer from this topic, because he added / removed classes based on the scroll position which is faster than inline styles.

[NReed253]

@senff, here is a link to my code, http://codepen.io/Nreed253/pen/FmzsA. I tried to incorporate your coding for the sticky menu bar, but I dont really understand JS too much. Could you help me a little bit? Ive watched a bunch of tutorials and Im not sure what I’m doing wrong… Thanks!

[Senff]

Looks you got the basics down on the other thread. :)

[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.

[Author]

Posts