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 /* * 随 ...
随机推荐
- Python 闭包,生成式,推导式
闭包概念 闭包,又称闭包函数或者闭合函数,其实和前面讲的嵌套函数类似, 不同之处在于,闭包中外部函数返回的不是一个具体的值,而是一个函数.一般情况下,返回的函数会赋值给一个变量,这个变量可以在后面被继 ...
- [转载]Net分布式系统之四:RabbitMQ消息队列应用
消息通信组件Net分布式系统的核心中间件之一,应用与系统高并发,各个组件之间解耦的依赖的场景.本框架采用消息队列中间件主要应用于两方面:一是解决部分高并发的业务处理:二是通过消息队列传输系统日志.目前 ...
- vue element 日期范围选择器限制:只能选今天之前的时间 || 只能选今天之后的时间 || 选取今天往后三天内
举例:只能选今天或者今天之后的时间(如下图) <el-date-picker clearable v-model="form.limitTime" type="da ...
- SAR成像(一):线性调频信号(LFM)和脉冲压缩
文章仅为个人理解,如有不妥之处欢迎指正. 1.脉冲压缩目的和意义 在雷达系统中,距离分辨率是很重要的一项性能指标,它决定了雷达能分辨两个单元之间的最小距离,更通俗的,即雷达分辨相离较近物体的能力.而决 ...
- 音乐下载器,音乐解析软件,全网音乐免费下载,mp3格式音乐下载,flac格式音乐下载,无损音质音乐下载器,你想听的都搜的到~
在这个音乐版权被三分天下的时代,想必大家也都会有这种的困扰,喜欢的音乐很多,刚好这些音乐的版权还分散在三大主流音乐厂商的手里. 这样的话,想要听或者下载自己喜欢的音乐可能要开多个会员,而且下载的音乐单 ...
- 最大流模板(EK,Dinic
一.EK EK算法:用bfs找增广路直到找不到为止.找到则更新最大流和残余网络,找不到则结束. 残余网络:对于一条走过的边,其正向边权值减少相应值,反向边权值增加相应值(用于反悔). 增广路:从所求起 ...
- 最近录了一些python视频教程
最近录了一些python视频教程,目前有机器学习的.python基础知识的,大家可以去B站观看. https://space.bilibili.com/431152063 python机器学习之KNN ...
- Jmeter:随机类函数
一.__Random 功能介绍:计算范围内的随机数 ${__Random(参数 1,参数 2,参数 3)} 参数 1:开始数字,包括在内 参数 2:结束数字,包括在内 参数 3:注册变量名称 二._ ...
- idea主题插件 ->Atom Material File Icons
Atom Material File Icons 插件名
- sass和less以及stylus的区别
一.区别: 需要配置不同:Sass需要Ruby环境:Less需要引入less.js:Stylus需要安装node 使用语法不用:Sass变量使用$ ;Less变量使用@:stylus变量使用 属性名 ...