jQuery实现电梯导航模块


Posted in jQuery onDecember 22, 2020

本文实例为大家分享了jQuery实现电梯导航模块的具体代码,供大家参考,具体内容如下

功能模块

1、当页面滚动到电器的模块, 显示电梯导航
2、点击电梯导航中的 li, 页面滚动到对应的内容区域
3、为当前点击的 li 添加 current 类
4、页面内容滚动到第几个区域, 左侧的电梯导航自动高亮对应的 li
5、为页面滚动设置节流阀(点击 li 时, 不进行第4步判断)

html部分结构

<ul class="sidebar">
  <li>手机模块</li>
  <li>电器模块</li>
  <li>产品模块</li>
  <li>服装模块</li>
  <li>鞋子模块</li>
 </ul>

 <section class="main">

  <div>手机模块</div>
  <div class="model">电器模块</div>
  <div>产品模块</div>
  <div>服装模块</div>
  <div>鞋子模块</div>
</section>

css部分 

* {
  margin: 0;
  padding: 0;
  margin: 0 auto;
 }
 
 div {
  width: 600px;
  height: 600px;
  border: 1px solid red;
 }
 
 li {
  list-style: none;
  border: 1px solid #abcdef;
  cursor: pointer;
 }
 
 .sidebar {
  display: none;
  position: fixed;
  left: 0;
  top: 350px;
  width: 66px;
  height: 200px;
 }
 
 .current {
  background-color: red;
 }

jQuery部分

//节流阀开启
 var flag = true
 //页面滚动事件
 $(window).scroll(function() {
   // 当页面滚动到电器模块侧边栏显示
   $(this).scrollTop() >= $('.model').offset().top ? $('.sidebar').show() : $('.sidebar').hide()
    // 遍历div
   $('.main div').each(function(i, item) {
    if (flag == false) {
     return
    }
    var Top = $(item).offset().top
     // 滚动的距离大于等于当前盒子离顶部的距离
    if ($(window).scrollTop() >= Top) {
    //显示高亮
     $('.sidebar li').eq(i).addClass('current').siblings().removeClass('current')
    }
   })
  })
  //点击让li,出现在对应的位置
  //绑定点击事件,获取索引,获取楼层与顶部的距离,给html添加动画
 $('.sidebar li').click(function() {

  // 节流阀关闭了
  flag = false
   // 改变背景颜色
   // 获取当前的索引值
  var index = $(this).index()
   // 获取当前索引位置上的盒子离顶部的距离
  var top = $('div').eq(index).offset().top
   // 给html添加动画
  $('html,body').animate({
   scrollTop: top

  }, function() {
   flag = true
  })
  //点击显示高亮
  $(this).addClass('current').siblings().removeClass('current')


})

jQuery实现电梯导航模块

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery plugin animsition使用小结
Sep 14 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
jQuery实现tab栏切换效果
Dec 22 #jQuery
jQuery+ajax实现文件上传功能
Dec 22 #jQuery
jQuery实现动态向上滚动
Dec 21 #jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 #jQuery
jquery实现淡入淡出轮播图效果
Dec 13 #jQuery
jquery实现拖拽小方块效果
Dec 10 #jQuery
jQuery实现简单弹幕制作
Dec 10 #jQuery
You might like
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php加密解密实用类分享
2014/01/07 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
popdiv
2006/07/14 Javascript
js获取div高度的代码
2008/08/09 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
Python如何将装饰器定义为类
2020/07/30 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
自主招生自荐信
2013/12/08 职场文书
小学敬老月活动方案
2014/02/11 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
欠条范文
2015/07/03 职场文书
军训决心书范文
2015/09/22 职场文书
详解Python中__new__方法的作用
2022/03/31 Python
Python如何让字典保持有序排列
2022/04/29 Python