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 相关文章推荐
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
vuex实现简易计数器
Oct 27 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
js自定义input文件上传样式
Oct 26 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
关于微信上网页图片点击全屏放大效果
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
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
python中循环语句while用法实例
2015/05/16 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
求职自荐书范文
2013/12/04 职场文书
服务质量承诺书
2014/03/27 职场文书
施工质量承诺书范文
2014/05/30 职场文书
自查自纠工作总结
2014/10/15 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
国庆庆典邀请函
2015/02/02 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS