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 /* * 随 ...
随机推荐
- vue移动端禁止弹层穿透、点击元素滚动到视图中心杂文日志
一,需求是在无限列card加载页面,点击任何一个card的显示图表按钮,图表自适应居中显示,显示遮罩层,页面可以滑动,但不能穿透点击 一个无限列表加载页面设置遮罩层一般需求是页面不能滑动的,但这比较特 ...
- Django的反向解析
Django的请求生命周期是指用户在浏览器访问网页时,Django根据网址在路由列表里查找相应的路由,在从路由里找到视图函数或视图类进行处理,将处理结果作为相应内容返回浏览器并生成网页内容. 这个生命 ...
- Jsonhelper类
public static class JsonHelper { #region json转对象 /// <summary> /// json转对象 /// </summary> ...
- RabbitMQ的安装与基本使用(windows版)
基本结构 windows安装 1. 先安装erlang开发语言,然后安装rabbitmq-server服务器(需要比对rabbitmq版本和erlang版本对应下载安装,我项目中选用的版本为otp_ ...
- 【个人笔记】CentOS 安装 Docker CE
要在 CentOS 上开始使用 Docker CE,请确保 满足先决条件,然后 安装Docker. 1. 卸载旧版本 sudo yum remove docker docker-client dock ...
- [vite] Internal server error: Invalid end tag.
使用vue3+vite+ant搭建的前端框架 在开发页面的时候发现了一直报错: [vite] Internal server error: Invalid end tag. 找也找不到为什么,网上查的 ...
- Mac安装Nvm Node开发环境
1.什么是nvm? nvm 是 Mac 下的 node 管理工具,可以在同一台电脑上安装多个Node.js版本灵活切换. 2.安装前的准备 a. 卸载已安装到全局的 node/npm 如果之前是在官 ...
- gulp安装出错
gulp安装出错 标签(空格分隔): gulp 贴上报错: [root@localhost web]# npm install gulp --save-dev gulptest@1.0.0 /mnt/ ...
- centos6.5最小安装不能联网
因为个人需要,在一台笔记本安装centos6.5最小安装时遇到了无法有线联网,后面经过了几个小时的处理 总算理清楚并解决了这个问题.亲测有效而不是转载! 如上图所示 处理这个问题颇有感受,在网上找了很 ...
- go语言学习教程
go语言学习教程 集合了连接go routine.go连接redis.go连接kafka等示例 https://github.com/fastbpmn/go-study TRANSLATE with ...