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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jQuery实现倒计时功能完整示例
Jun 01 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
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
通过javascript设置css属性的代码
2009/12/28 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
python之yield表达式学习
2014/09/02 Python
Python解决鸡兔同笼问题的方法
2014/12/20 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
python中class的定义及使用教程
2019/09/18 Python
python pycharm的安装及其使用
2019/10/11 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
统计每一学生的平均成绩
2014/06/06 面试题
新领导上任欢迎词
2014/01/13 职场文书
英语老师推荐信
2014/02/26 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
干部个人对照检查材料
2014/08/25 职场文书
如何做好工作总结!
2019/04/10 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
python基础入门之普通操作与函数(三)
2021/06/13 Python
Python基础之条件语句详解
2021/06/16 Python