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 textContent与innerText的异同分析
Oct 22 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
Vue脚手架编写试卷页面功能
Mar 17 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
PHP多文件上传类实例
2015/03/07 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
Python从零开始创建区块链
2018/03/06 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
Python 如何实现访问者模式
2020/07/28 Python
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
个人简历的自荐信
2013/10/23 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
廉洁使者实施方案
2014/03/29 职场文书
班主任新年寄语
2014/04/04 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
租房安全协议书
2014/08/20 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
初中同学会致辞
2015/08/01 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
Python中的 No Module named ***问题及解决
2022/07/23 Python