遇到的问题:

在做官网的时候,需要滚动定位的区块的图片不确定,无法确定用户浏览区域对应的模块导航

之前的解决方案是:

通过定位滚动条的位置来判断用户浏览区域对应的模块导航,这种方法的弊端是,区块的高度不确定时就无法计算滚动条的位置来判断;

优化方案:

页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域。

以下是DEMO

<!-- html -->
<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>
 
<script>
<!-- 页面滚动时导航定位 -->
 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;
  }
  }
  });
<!-- 点击导航定位页面 -->
  $navs.on('click', function(e) {
  e.preventDefault();
  $('html, body').animate({
'scrollTop': $($(this).attr('href')).offset().top
  }, 400);
  });
</script>

  

write by  tuantuan

Javascript实现页面滚动时导航智能定位的更多相关文章

  1. JS-JQ实现页面滚动时元素智能定位(顶部-其他部位)

      先看效果:     阅读前提:充分理解div的三种定位方式:浮动,相对定位,绝对定位 方法一(顶部)      原理:直接使用css 进行控制:缺点:不兼容ie6-:      实现:positi ...

  2. js页面滚动时层智能浮动定位实现

    直接上代码 $.fn.smartFloat = function (className) { var position = function (element) { var top = element ...

  3. JavaScript实现页面滚动到div区域div以动画方式出现

    用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...

  4. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  5. [转]JavaScript实现 页面滚动图片加载

    本文转自:http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html 又到了这个月的博客时间了,原计划是打算在这个月做一个 ...

  6. 使用 jQuery Ajax 在页面滚动时从服务器加载数据

    简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...

  7. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

  8. JavaScript当页面关闭时向后台发送请求

    今天做项目时遇上一个需求,当浏览器或页面关闭时将数据存储到数据库内.实现思想是采用js监测onunload然后发送请求.结果失败,刷新可以发送但是关闭并不能,整了一整天并没有解决,最后找到了解决办法. ...

  9. 基于jQuery实现页面滚动时顶部导航显示隐藏效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

随机推荐

  1. 【Java_Spring】RestTemplate发HTTP请求详解

    Springboot — 用更优雅的方式发HTTP请求(RestTemplate详解) Spring RestTemplate提交时设置http header请求头 Spring之RestTempla ...

  2. 在VUE中,关于CKEditor使用

    官方文档 语言配置 代码如下 ClassicEditor .create( document.querySelector( '#editor' ), { language: 'de' // 配置语言 ...

  3. destoon 配置文件config.inc.php参数说明

    $CFG['db_host']数据库服务器,可以包括端口号,一般为localhost $CFG['db_user']数据库用户名,一般为root $CFG['db_pass']数据库密码 $CFG[' ...

  4. destoon 列表页面增加手动选择排序方式

    在mobile/include/mall.inc.php  行60  $order = $MOD['order']; 之前增加 排序方式判断 如果有order参数则$order接受参数,没有就用默认  ...

  5. php加密解密函数大全

    第一种: <?php function encryptDecrypt($key, $string, $decrypt){ if($decrypt){ $decrypted = rtrim(mcr ...

  6. linux的一些权限的操作 chmod

    u ---属主 g ---用户组 o ---其他组 + ----赋予权限 - ----取消权限 = ----赋予权限并取消以前的权限 r = 4   //读 w =2   //写 x =1   //执 ...

  7. CentOS7搭建DNS服务器

    DNS是域名系统(Domain Name System)的缩写,它的作用是将主机名解析成IP(正向解析),从IP地址查询其主机名(反向解析). DNS的工作原理(1)客户机发出查询请求当被询问到有关本 ...

  8. UVALive - 8292 (法里数列)

    参考博客:zro https://blog.csdn.net/alusang/article/details/81840944 orz 给你一个分母 m 和一个浮点数 x,让你求出一个分母不超过 m ...

  9. 枚举进程——暴力搜索内存(Ring0)

    上面说过了隐藏进程,这篇博客我们就简单描述一下暴力搜索进程. 一个进程要运行,必然会加载到内存中,断链隐藏进程只是把EPROCESS从链表上摘除了,但它还是驻留在内存中的.这样我们就有了找到它的方法. ...

  10. python基础学习笔记——类的成员

    一. 细分类的组成成员 之前咱们讲过类大致分两块区域,如下图所示: 每个区域详细划分又可以分为: class A: company_name = '老男孩教育' # 静态变量(静态字段) __ipho ...