css做跟随导航栏

CSS可以很方便地实现跟随导航栏，下面我们来介绍一下如何实现。

/* 1.设置导航栏的样式 */.navbar {
      position: fixed;
     /* 固定定位 */  top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, .3);
      z-index: 999;
 /* 置顶 */}
/* 2.添加滚动事件 */$(window).scroll(function() {
      var sticky = $('.navbar'),      scroll = $(window).scrollTop();
      /* 3.判断滚动位置 */  if (scroll >
= 60) {
        sticky.addClass('fixed');
  }
 else {
        sticky.removeClass('fixed');
  }
}
    );
/* 4.设置固定导航栏的样式 */.navbar.fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, .3);
      z-index: 999;
}
    

以上代码中，我们先设置了导航栏的样式，并添加了滚动事件。当滚动位置scroll大于等于60时，我们就通过addClass()方法添加fixed类，从而设置固定导航栏的样式。当scroll小于60时，则通过removeClass()方法移除fixed类，导航栏就会恢复原始样式。

最后提醒一点，因为固定导航栏会遮挡部分内容，所以可以在对应的内容div或者body上添加一个padding-top，保证内容不会被导航栏遮挡。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！