導(dǎo)航欄固定、錨點(diǎn)平滑滾動(dòng)

Michael_Lin 發(fā)布于2019-08-02 16:12 / 428人閱讀

摘要：頁(yè)面用的框架頁(yè)面布局導(dǎo)航導(dǎo)航一導(dǎo)航二導(dǎo)航三導(dǎo)航四導(dǎo)航欄固定頁(yè)面滾動(dòng)時(shí)導(dǎo)航欄高亮顯示方案一為頁(yè)面添加頁(yè)面滾動(dòng)監(jiān)聽事件滾動(dòng)條距離頂端值滾動(dòng)條距離頂端值加循環(huán)距離頂端值判斷滾動(dòng)條位置清除類

頁(yè)面用的Bootstrap框架

頁(yè)面布局



  
    
      
      
        
      
    
    
      
        導(dǎo)航一
        導(dǎo)航二
        導(dǎo)航三
        導(dǎo)航四

導(dǎo)航欄固定,頁(yè)面滾動(dòng)時(shí)導(dǎo)航欄高亮顯示 方案一：

$(window).scroll(function() {
  //為頁(yè)面添加頁(yè)面滾動(dòng)監(jiān)聽事件
  var wst = $(window).scrollTop() //滾動(dòng)條距離頂端值
  console.log("滾動(dòng)條距離頂端值:" + wst)
  var len = 5;
  for (var i = 1; i < len; i++) { //加循環(huán)
    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) { //判斷滾動(dòng)條位置
      $(".navbar-nav li").removeClass("active"); //清除c類
      $("#navbar" + i).addClass("active"); //給當(dāng)前導(dǎo)航加c類
    }
  }
})

方案二：

1. 導(dǎo)航欄固定不透明

$(window).scroll(function () {
  var $nav = $(".navbar-collapse ul li"),
      length = $nav.length-1, // 獲取導(dǎo)航菜單 ul li 的個(gè)數(shù)
      item = new Array(), // 新建一個(gè)數(shù)組
      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. 導(dǎo)航欄固定透明

$(window).scroll(function () {
  var $nav = $(".navbar-collapse ul li"),
      length = $nav.length, // 獲取導(dǎo)航菜單 ul li 的個(gè)數(shù)
      item = new Array(), // 新建一個(gè)數(shù)組
      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"










$("body").scrollspy({ target: ".navbar-default" })

錨點(diǎn)平滑滾動(dòng)

$("a").click(function(){
    //根據(jù)a標(biāo)簽的href轉(zhuǎn)換為id選擇器，獲取id元素所處的位置，并高度減50px（這里根據(jù)需要自由設(shè)置）
    $("html,body").animate({scrollTop: ($($(this).attr("href")).offset().top)}, 500);
});