//  .zjong .dag_id    内容区
// .zuoyou .dao_hang a 电梯按钮


$(function() {
$(".zjong .dag_id").each((index, element) => {
let positionTop = $(element).offset().top;
let s;
$(document).scroll(function() {
let nowSite = $(document).scrollTop();
s.clearInterval();
s = setInterval(() => {
positionTop - 80 <= nowSite ?
$(".zuoyou .dao_hang a")
.eq(index)
.addClass("on")
.siblings()
.removeClass("on") :
console.log();
}, 300);
});
});
$('.zuoyou .dao_hang a').click(function() {
let rollIndex = $(this).index();
console.log(rollIndex);
$('html,body').animate({ scrollTop: $('.zjong .dag_id').eq(rollIndex).offset().top - 80 },
300
);
$(this).addClass('on').siblings().removeClass('on');
});
});

JQuery电梯导航的更多相关文章

  1. jQuery实现电梯导航特效

    功能描述: 当滚动条滑到某个位置时,显示电梯导航: 当用户滚动滚动条时,让电梯导航的选中状态和当前滚动到的区域保持一致: 当用户点击电梯导航时,滚动条滚动到被点击导航对应的区域 准备工作: 首先将jQ ...

  2. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

  3. jQuery弹性滑动导航菜单实现思路及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...

  4. jQuery 顶部导航尾随滚动,固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  5. 30个实用的jQuery选项卡/导航教程推荐

    很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...

  6. jQuery实现导航栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 简单的jquery左侧导航栏和页面选中

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...

  8. 10款最新CSS3/jQuery菜单导航插件

    这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...

  9. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  10. jquery实现导航栏跟随窗口滚动

    最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...

随机推荐

  1. Python 闭包,生成式,推导式

    闭包概念 闭包,又称闭包函数或者闭合函数,其实和前面讲的嵌套函数类似, 不同之处在于,闭包中外部函数返回的不是一个具体的值,而是一个函数.一般情况下,返回的函数会赋值给一个变量,这个变量可以在后面被继 ...

  2. [转载]Net分布式系统之四:RabbitMQ消息队列应用

    消息通信组件Net分布式系统的核心中间件之一,应用与系统高并发,各个组件之间解耦的依赖的场景.本框架采用消息队列中间件主要应用于两方面:一是解决部分高并发的业务处理:二是通过消息队列传输系统日志.目前 ...

  3. vue element 日期范围选择器限制:只能选今天之前的时间 || 只能选今天之后的时间 || 选取今天往后三天内

    举例:只能选今天或者今天之后的时间(如下图) <el-date-picker clearable v-model="form.limitTime" type="da ...

  4. SAR成像(一):线性调频信号(LFM)和脉冲压缩

    文章仅为个人理解,如有不妥之处欢迎指正. 1.脉冲压缩目的和意义 在雷达系统中,距离分辨率是很重要的一项性能指标,它决定了雷达能分辨两个单元之间的最小距离,更通俗的,即雷达分辨相离较近物体的能力.而决 ...

  5. 音乐下载器,音乐解析软件,全网音乐免费下载,mp3格式音乐下载,flac格式音乐下载,无损音质音乐下载器,你想听的都搜的到~

    在这个音乐版权被三分天下的时代,想必大家也都会有这种的困扰,喜欢的音乐很多,刚好这些音乐的版权还分散在三大主流音乐厂商的手里. 这样的话,想要听或者下载自己喜欢的音乐可能要开多个会员,而且下载的音乐单 ...

  6. 最大流模板(EK,Dinic

    一.EK EK算法:用bfs找增广路直到找不到为止.找到则更新最大流和残余网络,找不到则结束. 残余网络:对于一条走过的边,其正向边权值减少相应值,反向边权值增加相应值(用于反悔). 增广路:从所求起 ...

  7. 最近录了一些python视频教程

    最近录了一些python视频教程,目前有机器学习的.python基础知识的,大家可以去B站观看. https://space.bilibili.com/431152063 python机器学习之KNN ...

  8. Jmeter:随机类函数

    一.__Random 功能介绍:计算范围内的随机数 ${__Random(参数 1,参数 2,参数 3)} 参数 1:开始数字,包括在内 参数 2:结束数字,包括在内 参数 3:注册变量名称  二._ ...

  9. idea主题插件 ->Atom Material File Icons

    Atom Material File Icons    插件名

  10. sass和less以及stylus的区别

    一.区别: 需要配置不同:Sass需要Ruby环境:Less需要引入less.js:Stylus需要安装node 使用语法不用:Sass变量使用$ ;Less变量使用@:stylus变量使用 属性名 ...