//  .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. kubernetes service服务发现两种方式

    service服务发现ClusterIP方式 1.暴露deployment服务 kubectl expose deployment nginx4 --port=8000 --target-port=8 ...

  2. Java运算符(复习)

    运算符 运算符:对字面量或者变量进行操作的符号 表达式:用运算符把字面量或者变量连接起来,符合Java语法的式子就可以称为表达式. 算数运算符 符号 作用 + 加法作用 - 减法作用 * 乘法作用 / ...

  3. 二进制安装docker-20.10.9

    二进制包下载地址:https://download.docker.com/linux/static/stable/x86_64/  #解压tar xf docker-20.10.9.tgz #拷贝二进 ...

  4. pg9.6进程架构

    进程架构 1.1 进程父子关系 PostgreSQL 的进程架构由多个后端进程组成,其父进程是 postmaster.进程 ID 记录在 {PGDATA}/postmaster.pid 文件中.当实例 ...

  5. 手写Web图片懒加载~

    废话不多说,直接上代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>图片懒加载</title> ...

  6. 第九章:用Python处理省份城市编码数据

    文章目录 项目背景 项目代码 新增省份编码 获取编码映射数据 合并数据 统计省份用户数 使用SQL实现 源码地址 本文可以学习到以下内容: 免费获取全国省份.城市编码以及经纬度数 使用 pandas ...

  7. AFNI 步骤4-命令和预处理

    第一部分 AFNI命令和uber_subject.py的使用 略 第二部分 时间矫正 在扫描过程中,从第一个切片到最后一个切片之间存在一定的时间差,导致采集到的数据并不是一个时间点的. 在扫描过程中, ...

  8. REPLACE,TRANSLATE

    REPLACE 1.语法 replace(string,from_str,to_str) 2.说明: 针对string,将from_str中的字符替换为to_str中字符. 3.示例: /**说明:( ...

  9. pycharm—python__________windows下安装

    参考地址:https://www.runoob.com/w3cnote/pycharm-windows-install.html 一.安装python       1.pip 和 setuptools ...

  10. pands 编码知识

    一,pandas功能 1,基于numpy , 分析结构化数据. 二,常用基础知识编码练习 包括数据类型,数据操作,比如索引,分片 ,分组聚合 ,排序 过滤等等数分常见操作代码 # coding=utf ...