How do I do this effect (not sure what it's called)

Discussion in 'Web Design and Development' started by wheelhot, Mar 14, 2011.

  1. wheelhot macrumors 68020

    Joined:
    Nov 23, 2007
    #1
    Hello,
    I am currently in the process of designing and wondering how do some sites make their navigation to follow along as the user scroll down the page and restores back to its original position (right below the header)?

    [​IMG]

    Here is a rough sketch on what I meant, notice the navigation sticks to the top when the user scroll down, and when the page is scroll back up, the navigation will go back to its original position.

    I've seen some site do this, one of them that I can recall is Apple Online Store (Notice how the Summary and Spec panel moves). I've seen other sites do the same effect but can't recall the address or what it's called. Sorry that I can't give further information.

    Thanks in advance.
     
  2. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #2
    navigation is absolutely positioned and if need be, the highest z-index. i.e.

    css:
    body{
    position: relative;
    }
    ul#nav{
    width: 100%;
    position: absolute;
    top:0;
    left:0;
    z-index: 1000;
    }

    just make sure that there's no class, id, element that has position relative prior to the navigation or else that absolute position is going to be relative to that element.
     
  3. wheelhot thread starter macrumors 68020

    Joined:
    Nov 23, 2007
    #3
    Didn't work, care to give me your code?

    And is this effect can be achieved by CSS only or I'll need JQuery or something to make it work?
     
  4. wheelhot thread starter macrumors 68020

    Joined:
    Nov 23, 2007
    #4
    It's ok, found it :D

    Solution

    Hope the link will help other forum members who looking for similar effect ;)
     
  5. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #5
    i got what you were asking confused.. you just need to change the position from absolute to "position: fixed" and that will keep it in the browser window no matter your scrolling..the jquery will just animate an object.
     

Share This Page