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 相关文章推荐
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
老生常谈ES6中的类
Jul 31 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
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-MySQL教程归纳总结
2008/06/07 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
javascript实现表单验证
2016/01/29 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
vue slots 组件的组合/分发实例
2018/09/06 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
英文求职信结束语大全
2013/10/26 职场文书
酒店经理职责
2014/01/30 职场文书
应届大专生自荐书
2014/06/16 职场文书
南湾猴岛导游词
2015/02/09 职场文书
培训班开班主持词
2015/07/02 职场文书
小学英语教学随笔
2015/08/14 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS