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 相关文章推荐
Javascript中暂停功能的实现代码
Mar 04 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
对vux点击事件的优化详解
Aug 28 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
node.js实现上传文件功能
Jul 15 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 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或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
php读取mysql的简单实例
2014/01/15 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
php自动加载方式集合
2016/04/04 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
python编写弹球游戏的实现代码
2018/03/12 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
python实现Virginia无密钥解密
2019/03/20 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
建筑系毕业生自我鉴定
2014/01/24 职场文书
销售岗位职责范本
2014/06/12 职场文书
元宵节寄语大全
2015/02/27 职场文书
学校党支部承诺书
2015/04/30 职场文书
周一给客户的问候语
2015/11/10 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL