//  .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. VUE学习-自定义指令

    自定义指令 有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令. <div id="directive-demo"> <input ...

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

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

  3. 记一次 turbostat 的使用

    场景:为了测试海光cpu的性能,从而使用turbostat 来监测cpu工作时候的相关频率. cpu 型号: 1.Hygon C86 7165 24-core Processor 1.9GHz 384 ...

  4. VSCode 修改终端显示字体 字体间隔过大

    参考链接: https://code84.com/172442.html

  5. Go语言快速入门

    简介 Go是一个专门针对多处理器系统应用程序的编程进行了优化的,可以媲美C或C++代码的速度,而且更加安全.支持并行进程的语言. Go支持面向对象,而且具有真正的闭包(closures)和反射 (re ...

  6. 第二性 合卷本 横本.PDF

    书本详情 第二性台版 作者: 西蒙.德.波娃(Simone de Beauvoir)出版社: 貓頭鷹原作名: Le Deuxième Sexe译者: 邱瑞鑾出版年: 2013-10页数: 1136装帧 ...

  7. slitaz中tazpkg更改软件源

    在tazpkg手册中可以查到保存tazpkg软件源网址的文件,/var/lib/tazpkg/mirror

  8. 无锡哲讯谈食品行业如何利用SAP信息化方案实现数字化转型?

    随着人们对生活品质的提高,大家对食品安全问题越来越重视.食品企业如果缺乏相应的监管和追溯,很容易陷入困难的被动局面.SAP系统可以对食品加工企业供应链.生产销售.食品质量控制等环节的信息化管控,降低食 ...

  9. 第十三天笔记Cookie

    第十三天笔记Cookie 计算机重要的四个内容 数据结构 数据存储的结构及逻辑的体现,以及相关数据结构之间的操作(算法) 操作系统 windows(dos命令).linux(指令操作) 计网 网络通信 ...

  10. JAVA学习笔记-08

    package: 对类文件进行分类管理 给类提供多层命令空间 写在程序文件第一行,包名全部字母小写 类名的全称是  包名.类名 包也是一种封装形式. 包与包之间的访问: 包与包之间进行访问,被访问的包 ...