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 相关文章推荐
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
react-native android状态栏的实现
Jun 15 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
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 INI配置文件的解析实现分析
2011/01/04 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
smarty简单分页的实现方法
2014/10/27 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Python读取网页内容的方法
2015/07/30 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
详解Python中的文件操作
2016/08/28 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Python3中详解fabfile的编写
2018/06/24 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Python类反射机制使用实例解析
2019/12/30 Python
Python识别html主要文本框过程解析
2020/02/18 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
用Python开发app后端有优势吗
2020/06/29 Python
优秀信贷员先进事迹
2014/01/31 职场文书
大学生自我鉴定书
2014/03/24 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python