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 23 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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模拟HTTP认证
2006/10/09 PHP
linux下 C语言对 php 扩展
2008/12/14 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
php获取excel文件数据
2017/04/21 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
Ruby元编程基础学习笔记整理
2016/07/02 Python
PyQT实现多窗口切换
2018/04/20 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
Python同时迭代多个序列的方法
2020/07/28 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
学生自我鉴定模板
2013/12/30 职场文书
党员学习十八大感想
2014/01/17 职场文书
建筑节能汇报材料
2014/08/22 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
科学发展观标语
2014/10/08 职场文书
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL