Forums

Get help. Give help. A Web Design and Development Community.

Menu become Fix header on scroll

  • # June 16, 2013 at 2:04 am

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

    # June 16, 2013 at 5:18 am

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

    # June 16, 2013 at 5:20 am

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

    # June 16, 2013 at 5:21 am

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

    # March 9, 2014 at 11:55 am

    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.

    # July 18, 2014 at 4:35 pm

    @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!

    # July 19, 2014 at 7:42 am

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

    # January 12, 2016 at 5:36 am

    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.

Viewing 8 posts - 16 through 23 (of 23 total)

You must be logged in to reply to this topic.

We have a pretty good* newsletter.