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 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
JS实现点击掉落特效
Jan 29 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
jquery异步循环获取功能实现代码
2010/09/19 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python使用Matplotlib画饼图
2018/09/25 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
python连接PostgreSQL过程解析
2020/02/09 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
2014年网管工作总结
2014/12/11 职场文书
施工安全员岗位职责
2015/04/11 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android