JQuery电梯导航
// .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电梯导航的更多相关文章
- jQuery实现电梯导航特效
功能描述: 当滚动条滑到某个位置时,显示电梯导航: 当用户滚动滚动条时,让电梯导航的选中状态和当前滚动到的区域保持一致: 当用户点击电梯导航时,滚动条滚动到被点击导航对应的区域 准备工作: 首先将jQ ...
- jQuery Mobile 导航栏
jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...
- jQuery弹性滑动导航菜单实现思路及代码
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...
- jQuery 顶部导航尾随滚动,固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...
- 30个实用的jQuery选项卡/导航教程推荐
很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...
- jQuery实现导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 简单的jquery左侧导航栏和页面选中
这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...
- 10款最新CSS3/jQuery菜单导航插件
这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...
- 分享21个基于jquery菜单导航的效果
jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...
- jquery实现导航栏跟随窗口滚动
最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...
随机推荐
- 访问第三方接口带Authorization认证
第一种方式 HttpHeaders httpHeaders = new HttpHeaders(); httpHeaders.add("Authorization", " ...
- swagger界面不显示
从本地网关进入swagger界面不显示,原因 @ApiImplicitParams注解是给get请求用的,我给post用了
- Aspose.Cells 拒绝访问、数据库 64 bit mode with the 32 bit Oracle、视图加载格式不正确。
第一次遇到发布程序后,引发的这么多奇葩问题.记录一下. 配置:windows server 2018 R2 企业版 sp1 这是一台闲置4年机子,拿到机子里面已经安装过oracle客户端,我直接卸载装 ...
- "人生重开模拟器",10分钟轻松搭建!
人生重开模拟器是最近爆火的一款非常好玩的模拟游戏,会带你走入一个有趣的世界,开启全新的人生旅程,即"人生重开". 然而实际上,这款游戏短短在3天内上线,在百度贴吧.朋友圈.QQ群. ...
- maven-阿里云镜像
<mirror> <id>nexus-aliyun</id> <mirrorOf>*,!jeecg,!jeecg-snapshots&l ...
- docker kafka 一键搞定
1. docker network create app-tier 2. docker run -d --name zookeeper-server \ --network app-tier \ -e ...
- c语言container_of 编译报错
求指针ptr所在的结构体实例的首地址, #define offsetof(TYPE, MEMBER) ((size_t) &((TYPE *)0)->MEMBER) #define co ...
- [转]C#的反射
一.反射简介 1.1.反射的说明 反射:指程序可以访问.检测和修改它本身状态或行为的一种能力(即:审查元数据并收集关于它的类型信息的能力). ①元数据(编译以后的最基本数据单元:指程序和程序类型本身的 ...
- -behaviour()的使用,他具体有什么作用
Eralng 编程中的OTP OTP里面创建进程时 常用有四大behaviour • supervisor • gen_server • gen_fsm • gen_event 在erlang的编译器 ...
- 芯片ADS9224R的FPGA驱动实现
ADS9224R这款芯片是德州仪器(TI)的一款SAR ADC,笔者写这芯片IP核大概有段时间了,这款ADC采集芯片挺复杂的.笔者当时对写axi4_lite的IP核还不是很熟悉,就接下了含有这款芯片的 ...