Grow your CSS skills. Land your dream job.

Menu become Fix header on scroll

  • # June 15, 2013 at 5:23 am

    how it is possible to make a page where when we scroll down the Menu become the header and Fixed also

    # June 15, 2013 at 6:30 am

    Position: sticky.

    # June 15, 2013 at 6:48 am

    no dude it will not gona work

    # June 15, 2013 at 7:24 am

    You need to explain your requirements more clearly.

    # June 15, 2013 at 9:06 am

    Then you need to be more specific.

    # June 15, 2013 at 9:35 am

    Something like this probably: http://codepen.io/senff/pen/ayGvD

    # June 15, 2013 at 10:13 am

    @Senff

    yes exactlly what i want thanx alot

    # June 15, 2013 at 11:35 am

    @Senff, I tried using the codes, but it’s not working. Is there jquery plugin link I need to include?

    # June 15, 2013 at 12:12 pm

    @CodeGraphics: no, this should work. Can’t say what’s wrong unless I see how you’ve done it.

    I would suggest to give the code a better look and see/understand what it’s actually doing. In general, that’s a great way to learn new things (as opposed to “not working. help.” — not implying that that’s what you’re saying, but generally speaking).

    Basically, when the window scrolls, the function scroll() is executed. This function calculates the original top coordinate of the element with class “menu”, and the position of the window scrolled.
    If those are the same (which means the menu is at the top of the screen), it will get a class called “sticky”.
    Class “sticky” makes the element sit, sticky and all, at the top of the screen.

    As you can see, by deconstructing the code, no plugin is required.

    # June 15, 2013 at 12:31 pm

    Here is my [version.](http://codepen.io/codegraphics/pen/fLpaH “”) But it’s not working. Is there something am missing in the jquery code?

    # June 15, 2013 at 2:28 pm

    You guys or so weird about links. Your actually posting “why mine doesn’t work” when I showed how in a copy and paste. Weird.

    # June 15, 2013 at 3:55 pm

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

    # June 15, 2013 at 6:14 pm

    @CodeGraphics, include jQuery :)

    Btw, you won’t have IE support with `window.scrollY`.

    # June 15, 2013 at 9:39 pm

    @Crocodillon, any jquery version?

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".