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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
javascript multibox 全选
Mar 22 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
DOM下的节点属性和操作小结
2009/05/14 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
vue中引用阿里字体图标的方法
2018/02/10 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
python批量获取html内body内容的实例
2019/01/02 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
Gap工厂店:Gap Factory
2017/11/02 全球购物
自荐信的五个重要部分
2013/10/29 职场文书
教师队伍管理制度
2014/01/14 职场文书
办公室主任先进事迹
2014/01/18 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
学校政风行风整改方案
2014/10/25 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
企业计划生育责任书
2015/05/09 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL