jQuery网页定位导航特效实现方法


Posted in Javascript onDecember 19, 2016

本文实例讲述了jQuery网页定位导航特效实现方法。分享给大家供大家参考,具体如下:

描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换。滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换。

思路:比较滚动距离和楼层距离(相对于顶部),如果滚动距离大于等于楼层距离,即进入了相应楼层,然后通过一个变量来记录该楼层的信息,最后传递给右边高亮显示

1.点击右边固定导航项时,左边的内容跟着切换。

只需将右边a的href设置为左边区块的id加上#即可

2.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换。

核心代码如下:

$(function(){
  $(window).on("scroll",function(e){
    var $floor=$("li[id^=floor]");
    var $nav=$(".mui-lift-nav");
    var floorId="";
    var scrollTop=$(this).scrollTop();
    $floor.each(function(index,Ele){ //index是每个楼层的索引,Ele是每个楼层节点的dom元素对象(这个对象是原生对象,不是jquery对象)
      var offsetTop=$(Ele).offset().top; //Ele给它一层封装,必须加个美元符号,才能把它转换为jquery对象
      if(scrollTop>=offsetTop){
        floorId="#"+$(this).attr("id");
      }else{
        return false;
      }
    });
    $nav.filter("[href="+floorId+"]").addClass("mui-lift-cur-nav").siblings().removeClass("mui-lift-cur-nav");   //filter方法可以在一个集合里筛选出所要的元素
    if(scrollTop<$floor.first().offset().top ||scrollTop>$floor.last().offset().top+$floor.last().height()){
      $nav.removeClass("mui-lift-cur-nav");
    }
  });
})

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 #Javascript
详解jQuery lazyload 懒加载
Dec 19 #Javascript
JS实现滑动门效果的方法详解
Dec 19 #Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 #Javascript
简单理解js的冒泡排序
Dec 19 #Javascript
JS瀑布流实现方法实例分析
Dec 19 #Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 #Javascript
You might like
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
python实现AES加密解密
2019/03/28 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
python实现加密的方式总结
2020/01/19 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
网络技术专业推荐信
2014/02/20 职场文书
预防煤气中毒方案
2014/06/16 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
python实现剪贴板的操作
2021/07/01 Python
java实现web实时消息推送的七种方案
2022/07/23 Java/Android