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 相关文章推荐
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
javascript中new关键字详解
Dec 14 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
原生JS实现微信通讯录
Jun 18 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执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
wxpython 学习笔记 第一天
2009/02/09 Python
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
python相似模块用例
2016/03/04 Python
浅谈Python中的私有变量
2018/02/28 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
详解Python循环作用域与闭包
2019/03/21 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
Python中dict和set的用法讲解
2019/03/28 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
美国玩具公司:U.S.Toy
2018/05/19 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
建筑专业自荐信
2013/10/18 职场文书
火车的故事教学反思
2014/02/11 职场文书
父母对孩子的寄语
2014/04/09 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
健康状况证明模板
2014/10/23 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
反四风问题学习心得体会
2016/01/22 职场文书