Vertical navigation bar must move a bit from top then stay fixed

Question

I'm trying to have a vertical navigation bar as in www.callofduty.com/elite . As you can see in this page, to the right there are 3 nav links (CONNECT, COMPETE, IMPROVE). As you scroll down, the nav bar moves down a bit and then stays fixed.

I kindof got scroll-spy, fixed nav working. But the nav bar doesn't move down a bit and stays fixed. It just stays fixed where I positioned it. How to achieve that effect? Any insight would help.

Here is the link to my work http://jsfiddle.net/RJJ2J/

Answer 1

see the DEMO

Jquery

$(function(){    // this is the shorthand for document.ready
  $(document).scroll(function(){    // this is the scroll event for the document

    scrolltop = $(document).scrollTop(); // by this we get the value of the scrolltop ie how much scroll has been don by user
    if(parseInt(scrolltop) >= 80)    // check if the scroll value is equal to the top of navigation
      { 
        $("#navbar").css({"position":"fixed","top":"0"});   // is yes then make the position fixed to top 0
      }
    else
    {
      $("#navbar").css({"position":"absolute","top":"80px"}); // if no then make the position to absolute and set it to 80
    }
  })

});

CSS

#navbar{
    position: absolute;   // Initially set to absolute so it is movable with the page
    top: 80px; right: 100px;
    /*display: block;*/
    padding-right: 7px;
    background: #fff;
}

Answer 2

使用此Waypoint插件 ，它可以完全按照您的意图进行操作