zoukankan      html  css  js  c++  java
  • 灵活的楼梯导航条代码

    $(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
    })

    作者:freddyhuang
    出处:https://www.cnblogs.com/freddyhuang
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    Maven笔记之面试题合集
    Maven笔记之核心概念及常用命令
    UML中的关系
    RocketMq核心概念
    linux安装rocketMq(包括安装maven,JDK)
    linux安装JDK,配置环境变量
    ASP.NET Core读取appsettings.json配置文件信息
    ASP.NET Core获取客户端IP地址
    ASP.NET Core根据环境切换NLog配置
    ASP.NET Core使用NLog记录日志
  • 原文地址:https://www.cnblogs.com/freddyhuang/p/11303124.html
Copyright © 2011-2022 走看看