品优购电梯导航案例
时间:2022-07-26
本文章向大家介绍品优购电梯导航案例,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
案例分析:
- 当我们滚动到 今日推荐 模块,就让电梯导航显示出来
- 点击电梯导航页面可以滚动到相应内容区域
- 核心算法:因为电梯导航模块和内容区模块一一对应的
- 当我们点击电梯导航某个小模块,就可以拿到当前小模块的索引号
- 就可以把animate要移动的距离求出来:当前索引号内容区模块它的offset().top
- 然后执行动画即可
- 当我们点击电梯导航某个小li, 当前小li 添加current类,兄弟移除类名
- 当我们页面滚动到内容区域某个模块, 左侧电梯导航,相对应的小li模块,也会添加current类, 兄弟移除current类。
- 触发的事件是页面滚动,因此这个功能要写到页面滚动事件里面。
- 需要用到each,遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号
- 判断的条件: 被卷去的头部 大于等于 内容区域里面每个模块的offset().top
- 就利用这个索引号找到相应的电梯导航小li添加类。
实现代码:
// 电梯导航
$(function () {
// 每次点击都会执行滚动动画,滚动又会触发添加current类 此时需要节流阀(互斥锁)控制
// 节流阀
var flag = true; //节流阀默认打开
// 1.显示隐藏电梯导航
var asideTop = $(".recom").offset().top;
// 加载页面就调用函数 不用等到滚动屏幕才显示隐藏
toggleAside();
function toggleAside() {
// 滚动到相应位置时显示电梯导航栏
if ($(document).scrollTop() >= asideTop) {
$(".aside").fadeIn();
} else {
$(".aside").fadeOut();
}
};
$(window).scroll(function () {
toggleAside();
// 3.页面滚动到某个区域,对应小li添加current类名
// 节流阀打开时才执行里面代码
if (flag) {
// 遍历每个内容元素,获得索引号
// 滚动到相应内容offset().top位置时,就把对应索引号给小li
$(".floor .w").each(function (i, ele) {
if ($(document).scrollTop() >= $(ele).offset().top) {
// console.log(i);
$(".aside li").eq(i).addClass("current").siblings().removeClass();
}
})
}
});
// 2. 点击小li跳转到对应位置
$(".aside li").on("click", function () {
flag = false; //每次点击关闭节流阀
// 获取当前点击的小li索引号 点击第几个小li就跳转到对应第几个元素的offset().top位置
// console.log($(this).index());
var current = $(".floor .w").eq($(this).index()).offset().top;
// 只有元素可以做动画 所以用html和body
$("html,body").stop().animate({
scrollTop: current
}, function () {
// 执行完动画滚动就打开节流阀
flag = true;
});
// 给当前点击的小li添加current类名
$(this).addClass("current").siblings("li").removeClass();
});
})
- css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。
- 善良比聪明更重要
- zepto 基础知识(6)
- 一行 Python 代码实现并行
- zepto 基础知识(5)
- 移动Web 开发中的 Off Canvas 导航
- Angularjs基础(八)
- 移动Web 开发中的一些前端知识收集汇总
- Angularjs基础(七)
- WordPress 中八个有用的代码片段
- 【释疑文】DeveMobile、EaseMobile 及Devework 主题的区别
- DeveMobile/EaseMobile 主题双双更新1.1,增加离线存储,社交媒体关注等功能
- Angularjs基础(六)
- 如果机器人拥有痛觉,这个世界会怎样
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Laravel-admin之修改操作日志的方法
- php使用curl伪造浏览器访问操作示例
- 关于laravel后台模板laravel-admin select框的使用详解
- 基于Laravel-admin 后台的自定义页面用法详解
- php解决约瑟夫环算法实例分析
- 浅谈laravel-admin的sortable和orderby使用问题
- 使用composer安装使用thinkphp6.0框架问题【视频教程】
- 基于laravel-admin 后台 列表标签背景的使用方法
- 解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
- laravel-admin 中列表筛选方法
- Laravel框架控制器的middleware中间件用法分析
- laravel-admin的图片删除实例
- 在laravel-admin中列表中禁止某行编辑、删除的方法
- Laravel的Auth验证Token验证使用自定义Redis的例子
- laravel-admin解决表单select联动时,编辑默认没选上的问题