垂直导航栏必须摆脱顶一下，然后固定住(Vertical navigation bar must mo

2019-10-17 07:14发布

我想有一个垂直导航栏在www.callofduty.com/elite 。正如你可以在这个页面中看到，右边有3个导航链接（CONNECT，竞争，提高）。当你向下滚动，导航栏向下移动了一下，然后保持固定。

我kindof了滚动间谍，固定的导航工作。但是，导航栏不动了一点，并保持固定。它只是停留固定在那里我将其定位。如何达到这样的效果？任何有识之士将帮助。

这里是链接到我的工作http://jsfiddle.net/RJJ2J/

Answer 1:

看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;
}