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 replace方法去空格
May 08 jQuery
jquery实现图片轮播器
May 23 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 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 JSON格式数据交互实例代码详解
2011/01/13 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
php设置编码格式的方法
2013/03/05 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Python之py2exe打包工具详解
2017/06/14 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
python 切换root 执行命令的方法
2019/01/19 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
Python交互式图形编程的实现
2019/07/25 Python
python生成大写32位uuid代码
2020/03/03 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
大学生个人推荐信范文
2013/11/25 职场文书
应聘自荐信
2013/12/14 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
教师党员个人自我评价
2015/03/04 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
Python代码实现双链表
2022/05/25 Python