Javascript实现页面滚动时导航智能定位


Posted in Javascript onMay 06, 2017

常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域。

假设结构如下:

<div class="container">
  <div class="wrapper">
    <div class="section" id="section1">section1</div>
    <div class="section" id="section2">section2</div>
    <div class="section" id="section3">section3</div>
    <div class="section" id="section4">section4</div>
    <div class="section" id="section5">section5</div>
  </div>
  <nav>
    <a href="#section1" rel="external nofollow" class="current">section1</a>
    <a href="#section2" rel="external nofollow" >section2</a>
    <a href="#section3" rel="external nofollow" >section3</a>
    <a href="#section4" rel="external nofollow" >section4</a>
    <a href="#section5" rel="external nofollow" >section5</a>
  </nav>
</div>

页面滚动时导航定位

js代码如下:

var $navs = $('nav a'),          // 导航
  $sections = $('.section'),       // 模块
  $window = $(window),
  navLength = $navs.length - 1;
  
$window.on('scroll', function() {
  var scrollTop = $window.scrollTop(),
    len = navLength;

  for (; len > -1; len--) {
    var that = $sections.eq(len);
    if (scrollTop >= that.offset().top) {
       $navs.removeClass('current').eq(len).addClass('current');
       break;
    }
  }
});

效果如下:

Javascript实现页面滚动时导航智能定位

不难看出,基本原理就是在window滚动的时候,依次将模块从后向前遍历,如果window的滚动高度大于或等于当前模块的距页面顶部的距离,则将当前模块对应的导航突出显示,并且不再继续遍历

点击导航定位页面

除了这种需求外,还有另一种需求,就是点击导航定位到导航所对应模块的顶部。

代码如下:

$navs.on('click', function(e) {
  e.preventDefault();
  $('html, body').animate({
    'scrollTop': $($(this).attr('href')).offset().top
  }, 400);
});

效果如下:

Javascript实现页面滚动时导航智能定位

以上基本上满足了业务的基本需求,这是工作中总结的经验,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
JavaScript实现打地鼠小游戏
Apr 23 #Javascript
简单实现jQuery弹幕效果
May 06 #jQuery
javascript编写简易计算器
May 06 #Javascript
JavaScript实现无穷滚动加载数据
May 06 #Javascript
Angularjs2不同组件间的通信实例代码
May 06 #Javascript
jquery实现提示语淡入效果
May 05 #jQuery
Jquery获取radio选中的值
May 05 #jQuery
You might like
php多线程实现方法及用法实例详解
2015/10/26 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
AngularJS基础知识
2014/12/21 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
python求列表交集的方法汇总
2014/11/10 Python
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
python 基础教程之Map使用方法
2017/01/17 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
英国景点门票网站:attractiontix
2019/08/27 全球购物
二年级学生评语大全
2014/04/23 职场文书
单位考核鉴定意见
2015/06/05 职场文书
于丹论语心得观后感
2015/06/15 职场文书
golang正则之命名分组方式
2021/04/25 Golang
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android