導航欄固定、錨點平滑滾動

頁面用的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);
});