[Jquery]网页定位导航特效
描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换。滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换。
思路:比较滚动距离和楼层距离(相对于顶部),如果滚动距离大于等于楼层距离,即进入了相应楼层,然后通过一个变量来记录该楼层的信息,最后传递给右边高亮显示
1.点击右边固定导航项时,左边的内容跟着切换。
只需将右边a的href设置为左边区块的id加上#即可
2.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换。
$(function(){
$(window).on("scroll",function(e){
var $floor=$("li[id^=floor]");
var $nav=$(".mui-lift-nav");
var floorId="";
var scrollTop=$(this).scrollTop();
$floor.each(function(index,Ele){ //index是每个楼层的索引,Ele是每个楼层节点的dom元素对象(这个对象是原生对象,不是jquery对象)
var offsetTop=$(Ele).offset().top; //Ele给它一层封装,必须加个美元符号,才能把它转换为jquery对象
if(scrollTop>=offsetTop){
floorId="#"+$(this).attr("id");
}else{
return false;
}
});
$nav.filter("[href="+floorId+"]").addClass("mui-lift-cur-nav").siblings().removeClass("mui-lift-cur-nav"); //filter方法可以在一个集合里筛选出所要的元素
if(scrollTop<$floor.first().offset().top ||scrollTop>$floor.last().offset().top+$floor.last().height()){
$nav.removeClass("mui-lift-cur-nav");
}
});
})
[Jquery]网页定位导航特效的更多相关文章
- jquery网页定位导航特效
<!DOCTYPE html> <html lang="en"> <head> <script src="http://code ...
- JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
- jQuery实现网页定位导航
代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title ...
- 慕课网中网页定位导航中js相关问题总结
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- jQuery Tocify 定位导航
Tocify是一个jQuery插件,能够动态的生成文章目录,Tocify可以随意的设置Twitter Bootstrap 或者 jQueryUI Themeroller支持的可选动画和jQuery的显 ...
- jQuery实现电梯导航特效
功能描述: 当滚动条滑到某个位置时,显示电梯导航: 当用户滚动滚动条时,让电梯导航的选中状态和当前滚动到的区域保持一致: 当用户点击电梯导航时,滚动条滚动到被点击导航对应的区域 准备工作: 首先将jQ ...
- JavaScript定位导航滚动2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- 纯CSS + 媒体查询实现网页导航特效
纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...
随机推荐
- SAP屠夫---折旧在13-16调整期间的烦恼(转)
"应尽量避免在13-16期的折旧行为",在去年新准则ERP调整时就强调过,实际上, 有的企业并不使用13-16期间, 假设某家企业将折旧折在13期, 非常可惜的是,sap的折旧费用 ...
- python的最最最最最基本语法(3)
模块:在Python中,一个.py文件就称之为一个模块(Module). 为了避免模块名冲突,Python又引入了按目录来组织模块的方法,称为包(Package).例如两个名不hello.py的模块分 ...
- 5.7 C和C++的关系
- iOS开发者帐号流程
http://ask.dcloud.net.cn/article/152 iOS证书(.p12)和描述文件(.mobileprovision)申请 5+App开发 Apple证书 iOS证书 iOS有 ...
- Illegal mix of collations (big5_chinese_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE) for operation 'like'
解释: 非法的混合排序规则(big5_chinese_ci)和(utf8_general_ci)操作“like”. 原本是单个字段查询数据的,现在是把所有的字段用一个搜索框来查询. 主要出问题是下列这 ...
- HashMap详解
HashMap:http://www.cnblogs.com/xwdreamer/archive/2012/06/03/2532832.html ConcurrentHashMap:http://ww ...
- $.each 与$().each()
在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法.两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点. $().each,对于这个方法,在d ...
- js setTimeout 与 setInterval 以及 for 循环 刷新UI
1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式:执行一次: 如果需要执行多次,自身再次调用 setTimeout(): 示例:无穷循环并带停止按钮的 <html&g ...
- 在Android上使用Google V8 JS 引擎
在cantk-runtime中直接使用的webview,通过JAVA扩展接口把Canvas的2d Context的API定向到JNI,通过OpenGL来图形加速,渲染速度大大提高.后来测试发现在大部分 ...
- Java并发编程:并发容器之ConcurrentHashMap
转载: Java并发编程:并发容器之ConcurrentHashMap JDK5中添加了新的concurrent包,相对同步容器而言,并发容器通过一些机制改进了并发性能.因为同步容器将所有对容器状态的 ...