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的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
js实现tab切换效果
Feb 16 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
vue.js实现双击放大预览功能
Jun 23 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连接Oracle数据库
2006/10/09 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
js 如何实现对数据库的增删改查
2012/11/23 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
vue2配置scss的方法步骤
2019/06/06 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
python urllib爬取百度云连接的实例代码
2017/06/19 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
实例讲解Python3中abs()函数
2019/02/19 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
精彩的推荐信范文
2013/11/26 职场文书
2013年员工自我评价范文
2013/12/27 职场文书
会计主管岗位职责
2014/01/03 职场文书
如何写你的创业计划书
2014/01/07 职场文书
房屋改造计划书
2014/01/10 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
素质教育培训心得体会
2016/01/19 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
python - asyncio异步编程
2021/04/06 Python
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL