Javascript实现页面滚动时导航智能定位
遇到的问题:
在做官网的时候,需要滚动定位的区块的图片不确定,无法确定用户浏览区域对应的模块导航
之前的解决方案是:
通过定位滚动条的位置来判断用户浏览区域对应的模块导航,这种方法的弊端是,区块的高度不确定时就无法计算滚动条的位置来判断;
优化方案:
页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域。
以下是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实现页面滚动时导航智能定位的更多相关文章
- JS-JQ实现页面滚动时元素智能定位(顶部-其他部位)
先看效果: 阅读前提:充分理解div的三种定位方式:浮动,相对定位,绝对定位 方法一(顶部) 原理:直接使用css 进行控制:缺点:不兼容ie6-: 实现:positi ...
- js页面滚动时层智能浮动定位实现
直接上代码 $.fn.smartFloat = function (className) { var position = function (element) { var top = element ...
- JavaScript实现页面滚动到div区域div以动画方式出现
用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...
- WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
- [转]JavaScript实现 页面滚动图片加载
本文转自:http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html 又到了这个月的博客时间了,原计划是打算在这个月做一个 ...
- 使用 jQuery Ajax 在页面滚动时从服务器加载数据
简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...
- WOW.js和animate.css让页面滚动时显示动画
官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...
- JavaScript当页面关闭时向后台发送请求
今天做项目时遇上一个需求,当浏览器或页面关闭时将数据存储到数据库内.实现思想是采用js监测onunload然后发送请求.结果失败,刷新可以发送但是关闭并不能,整了一整天并没有解决,最后找到了解决办法. ...
- 基于jQuery实现页面滚动时顶部导航显示隐藏效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
随机推荐
- 08GNU as汇编
1. 概述 由于操作系统许多关键代码要求有很高的执行速度和效率,因此在一个操作系统源代码中通常就会包含大约 10% 左右的起关键作用的汇编语言程序量.Linux 操作系统也不例外,它的 32 位初 ...
- Beyond Compare4.x 破解方案
如果过了30天的评估期或报“Beyond Compare 许可证密钥被撤销” 而导致不能再打开Beyond Compare,可以用下面的方法来解决: 1.找到“C:\Users\[Your User ...
- 【laravel】Disabling CSRF for Specific Routes - Laravel 5
原文 http://www.camroncade.com/disable-csrf-for-specific-routes-laravel-5/ Disabling CSRF for Specific ...
- Python中的字典与集合
今天我们来讲一讲python中的字典与集合 Dictionary:字典 Set:集合 字典的语法: Dictionary字典(键值对) 语法: dictionary = {key:value,key: ...
- python numpy模块
目录 numpy模块 一维数组 二维数组(用的最多的) 获取多维数组的行和列 多维数组的索引 高级功能 多维数组的元素的替换 通过函数方法创建多维数组 矩阵的运算 点乘和转置(了解) 点乘必须 m*n ...
- 1.python中的变量
什么是变量 1.在任何语言中都有变量的概念,在python中变量是用一个变量名表示,变量名必须是用大小写英文字母,数字,下滑写(_)组成.不能用数字开头.(但用中文做变量名也可以,不要这样做) 例: ...
- $(MAKE) , make命令
make 定义了很多默认变量,像常用的命令或者是命令选项之类的,什么CC啊,CFLAGS啊之类.$(MAKE)就是预设的 make 这个命令的名称(或者路径).make -p 可以查看所有预定义的变量 ...
- aoj-0118 property distribution(搜索)
Time limit1000 ms Memory limit131072 kB タナカ氏が HW アールの果樹園を残して亡くなりました.果樹園は東西南北方向に H × Wの区画に分けられ.区画ごとにリ ...
- Java中的数据类型和引用
JAVA数据类型分primitive数据类型和引用数据类型. Java中的primitive数据类型分为四类八种.primitive也不知道怎么翻译比较贴切, 暂且叫他基本数据类型吧, 其实直接从英文 ...
- 2015多校训练第二场 hdu5305
把这题想复杂了,一直在考虑怎么快速的判断将选的边和已选的边无冲突,后来经人提醒发现这根本没必要,反正数据也不大开两个数组爆搜就OK了,搜索之前要先排除两种没必要搜的情况,这很容易想到,爆搜的时候注意几 ...