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的index方法实现tab效果
Feb 16 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
JavaScript中this详解
Sep 01 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 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
关于手调机和数调机的选择
2021/03/02 无线电
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
python实现BackPropagation算法
2017/12/14 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
Python列表的切片实例讲解
2019/08/20 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
python爬取天气数据的实例详解
2020/11/20 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
夜大毕业生自我评价分享
2013/11/10 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
升国旗仪式主持词
2014/03/19 职场文书
校园安全标语
2014/06/07 职场文书
投标授权委托书范文
2014/08/02 职场文书
2014年服务员工作总结
2014/11/18 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
Python3接口性能测试实例代码
2021/06/20 Python