Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Menu become Fix header on scroll

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #45405
    Junni
    Member

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

    #138812
    Kitty Giraudel
    Participant

    Position: sticky.

    #138817
    Junni
    Member

    no dude it will not gona work

    #138824
    Paulie_D
    Member

    You need to explain your requirements more clearly.

    #138819
    Kitty Giraudel
    Participant

    Then you need to be more specific.

    #138820
    Senff
    Participant

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

    #138825
    PicnicTutorials
    Participant
    #138826
    Junni
    Member

    @Senff

    yes exactlly what i want thanx alot

    #138832
    CodeGraphics
    Participant

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

    #138834
    Senff
    Participant

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

    #138836
    CodeGraphics
    Participant

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

    #138846
    PicnicTutorials
    Participant

    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.

    #138852
    CodeGraphics
    Participant

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

    #138859
    CrocoDillon
    Participant

    @CodeGraphics, include jQuery :)

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

    #138865
    CodeGraphics
    Participant

    @Crocodillon, any jquery version?

Viewing 15 posts - 1 through 15 (of 23 total)
  • The forum ‘CSS’ is closed to new topics and replies.