页面用的Bootstrap框架

页面布局

<!-- 导航 -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img alt="Brand" width="20" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2154195776,3216516198&fm=58&bpow=451&bpoh=451">
      </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li id="navbar1" class="active"><a href="#part1">导航一</a></li>
        <li id="navbar2"><a href="#part2">导航二</a></li>
        <li id="navbar3"><a href="#part3">导航三</a></li>
        <li id="navbar4"><a href="#part4">导航四</a></li>
      </ul>
    </div>
  </div>
</nav>

导航栏固定,页面滚动时导航栏高亮显示

方案一：

$(window).scroll(function() {
  //为页面添加页面滚动监听事件
  var wst = $(window).scrollTop() //滚动条距离顶端值
  console.log("滚动条距离顶端值:" + wst)
  var len = 5;
  for (var i = 1; i < len; i++) { //加循环
    console.log("item距离顶端值:" + $("#part" + i).offset().top);

    var next = i + 1;
    var itemOffsetTop = $("#part" + i).offset().top;

    console.log(i);
    if (i === (len - 1)) {
      var condition = itemOffsetTop <= wst;
    } else {
      var itemNextOffsetTop = $("#part" + next).offset().top;
      var condition = itemOffsetTop <= wst && itemNextOffsetTop >= wst;
    }
    console.log(condition, i)
    if (condition) { //判断滚动条位置
      $('.navbar-nav li').removeClass("active"); //清除c类
      $("#navbar" + i).addClass("active"); //给当前导航加c类
    }
  }
})

方案二：

1. 导航栏固定不透明

$(window).scroll(function () {
  var $nav = $(".navbar-collapse ul li"),
      length = $nav.length-1, // 获取导航菜单 ul li 的个数
      item = new Array(), // 新建一个数组
      sTop = $(window).scrollTop(); // 获取偏移的高度
  for (var i = 0; i < length; i++) {
      if (i == 0) {
          item[i + 1] = $(".page-wrapper>div:first-child").offset().top;
          if (sTop >= item[i + 1]) {
            $nav.eq(i).addClass("active").siblings("li").removeClass("active");
          }
      } else {
          item[i + 1] = $(".page-wrapper>div:nth-child(" + (i + 1) + ")").offset().top;
          if (sTop >= item[i + 1] - 100) {
              $nav.eq(i).addClass("active").siblings("li").removeClass("active");
          }
      }
  }
})

2. 导航栏固定透明

$(window).scroll(function () {
  var $nav = $(".navbar-collapse ul li"),
      length = $nav.length, // 获取导航菜单 ul li 的个数
      item = new Array(), // 新建一个数组
      sTop = $(window).scrollTop(); // 获取偏移的高度
  for (var i = 0; i < length; i++) {
    item[i + 1] = $(".page-wrapper>div:nth-child(" + (i + 1) + ")").offset().top;
    if (sTop >= item[i + 1]) {
        $nav.eq(i).addClass("active").siblings("li").removeClass("active");
    }
  }
})

方案三：

利用Bootstrap的data-spy="scroll"

<!-- 导航 -->
<nav class="navbar-default navbar-static" role="navigation">
</nav>
<!-- 主页面 -->
<div data-spy="scroll" :style="{height: scrollHeight}" data-target=".navbar-default" data-offset="0" class="page-wrapper">
<!-- ...... -->
</div>

<!-- JS -->
$('body').scrollspy({ target: '.navbar-default' })

锚点平滑滚动

$('a').click(function(){
    //根据a标签的href转换为id选择器，获取id元素所处的位置，并高度减50px（这里根据需要自由设置）
    $('html,body').animate({scrollTop: ($($(this).attr('href')).offset().top)}, 500);
});