靈活的樓梯導航條代碼

$(function(){
  $('body').css('background','#fff');
  var flag = true; //控制當點擊樓層號時,禁止滾動條的代碼執行   值爲true時,能夠執行滾動條代碼
  // 滾動條滾動 --  找到當前樓層的索引    控制樓層號  固定操做按鈕
  $('.el-scrollbar__wrap').scroll(function () {
      if (flag) {
        var items = $(".div-step");
        var menu = $("#menu");
        var top = $(document).scrollTop();
        var currentId = ""; //滾動條如今所在位置的item id
        var cl = '';
        var h = $(window).height()/2;
        items.each(function () {
          var m = $(this);
          //m.offset().top表明每個item的頂部位置
          if (top > m.offset().top-h/2) {
            currentId = "#" + m.attr("id");
            cl = m.attr("id");
          } else {
            return false;
          }
        });
        var currentLink = menu.find(".active");
        if (currentId && currentLink.attr("href") != currentId) {
          currentLink.removeClass("active");
          menu.find("[data-name=" + cl + "]").addClass("active");
          $(currentId).addClass("active").siblings().removeClass("active");
        }
      }
    });
  // end 滾動時,固定左側的menu 並導航到相對位置

  // 點擊左側滾動導航條 start
  $('.ciclebox').click(function () {
    var ele = $(this).children('a').attr('href');
    $(ele).addClass('active').siblings('.div_step').removeClass('active');
    $(this).addClass('active').siblings('.ciclebox').removeClass('active');
  });
  // 點擊左側滾動導航條 end
})
相關文章
相關標籤/搜索