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)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
webpack入门必知必会
Jan 16 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
Electron整合React使用搭建开发环境的步骤详解
Jun 07 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
PHP实现下载功能的代码
2012/09/29 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
python结合API实现即时天气信息
2016/01/19 Python
python实现按行切分文本文件的方法
2016/04/18 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
详解python中docx库的安装过程
2019/11/08 Python
python super用法及原理详解
2020/01/20 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
网络教育自我鉴定
2013/11/01 职场文书
三年级科学教学反思
2014/01/29 职场文书
超市采购员岗位职责
2014/02/01 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
导游带团欢迎词
2015/09/30 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL