垂直导航栏必须从顶部移动一点然后保持固定

2 回答

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

  回复于 2024-05-11T00:13:37+08:00
• 0

  使用这个waypoints plugin，它完全按照你要做的去做

  回复于 2024-05-11T00:13:37+08:00