jQuery滚动监听实现商城楼梯式导航效果


Posted in Javascript onMarch 06, 2017

 话不多说,上局部效果图:

jQuery滚动监听实现商城楼梯式导航效果

html结构,左侧定位的导航需要一个ul,中间内容,我是直接截得图片,为了效果省事,也是用的ul,最后你们要用的话也可以用ul,或者div,但是每个区域得是一个div,例如,精选的放一个div,女装的放一个div,所有的区域都套在一个大的div里面,也就是类似于ul>li的结构(只提供html结构和jQuery,样式的话根据设计稿):

<div class="menu">
 <ul>
  <li class="on"><i class="iconfont"></i>精选</li>
  <li><i class="iconfont"></i>女装</li>
  <li><i class="iconfont"></i>鞋包</li>
  <li><i class="iconfont"></i>男士</li>
  <li><i class="iconfont"></i>运动</li>
  <li><i class="iconfont"></i>饰品</li>
  <li><i class="iconfont"></i>精选</li>
  <li><i class="iconfont"></i>女装</li>
  <li><i class="iconfont"></i>鞋包</li>
  <li><i class="iconfont"></i>男士</li>
  <li><i class="iconfont"></i>运动</li>
  <li><i class="iconfont"></i>饰品</li>?
 </ul>
</div>
<div class="main">
 <ul>
  <li><img src="images/main_pic1.png" /></li>
  <li><img src="images/main_pic2.png" /></li>
  <li><img src="images/main_pic3.png" /></li>
  <li><img src="images/main_pic4.png" /></li>
  <li><img src="images/main_pic5.png" /></li>
  <li><img src="images/main_pic6.png" /></li>
  <li><img src="images/main_pic7.png" /></li>
  <li><img src="images/main_pic8.png" /></li>
  <li><img src="images/main_pic9.png" /></li>
  <li><img src="images/main_pic10.png" /></li>
  <li><img src="images/main_pic11.png" /></li>
  <li><img src="images/main_pic12.png" /></li>
 </ul>
</div>
<script src="js/jquery.js"></script>
<script>
 var offon = true;
 $(window).scroll(function(){//滚动浏览器就会执行
  if(offon){
  //获取滚动高度
  var _top = $(window).scrollTop();
  if(_top>150){
   $('.menu').show();
  }else{
   $('.menu').hide();
  };
  $('.main ul li').each(function(i){
   //获取当前下标
   var _index = $(this).index();
   var _height = $(this).offset().top+500;//获取上偏移值
   if(_height > _top){//优先原则
    $('.menu ul li').eq(_index).addClass('on').siblings().removeClass('on');
    return false;//跳出遍历
   };
  });
  };
 });
 $('.menu ul li').click(function(){
  offon = false;
  var _index = $(this).index();
  $(this).addClass('on').siblings().removeClass('on');
  var _height = $('.main ul li').eq(_index).offset().top;//获取上偏移值
  $('body,html').animate({scrollTop:_height},500,function(){
   offon = true;
  });
 });
</script>

以上所述是小编给大家介绍的jQuery滚动监听实现商城楼梯式导航,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript无阻塞加载具体方式
Jun 28 Javascript
Javascript Objects详解
Sep 04 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
纯JS实现弹性导航条效果
Mar 06 #Javascript
JS实现颜色动态淡化效果
Mar 06 #Javascript
vue模板语法-插值详解
Mar 06 #Javascript
js中的面向对象入门
Mar 06 #Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 #Javascript
Vue 2.x教程之基础API
Mar 06 #Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 #Javascript
You might like
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
拖拉表格的JS函数
2008/11/20 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
PyTorch安装与基本使用详解
2020/08/31 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
初中班主任寄语
2014/04/04 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
人事局接收函
2015/01/31 职场文书
面试复试通知单
2015/04/24 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python
Python基于百度API识别并提取图片中文字
2021/06/27 Python
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript