jquery 随楼层滚动导航激活状态改变特效

简介:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//  楼层滚动
     $(window).scroll( function (){
         var  top = $(document).scrollTop();           //定义变量,获取滚动条的高度
         var  menu = $( "#nav" );                       //定义变量,抓取#menu
         var  items = $( ".container" ).find( ".item" );     //定义变量,查找.item
         var  curId =  "" ;                              //定义变量,当前所在的楼层item #id 
 
         items.each( function (){
             var  m = $( this );                         //定义变量,获取当前类
             var  itemsTop = m.offset().top;         //定义变量,获取当前类的top偏移量
             if (top > itemsTop-300){
                 curId =  "#"  + m.attr( "id" );
             } else {
                 return  false ;
             }
         });
 
         //给相应的楼层设置cur,取消其他楼层的cur
         var  curLink = menu.find( ".active" );
         if ( curId && curLink.attr( "href" ) != curId ){
             curLink.removeClass( "active" );
             menu.find(  "[href="  + curId +  "]"  ).addClass( "active" );
         }
         // console.log(top);


本文转自  小旭依然  51CTO博客,原文链接:http://blog.51cto.com/xuyran/1909498
相关文章
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
67 0
|
4月前
|
JavaScript
jQuery实现无缝图片滚动效果
jQuery实现无缝图片滚动效果
157 67
|
2月前
|
JavaScript
jQuery实现的滚动切换图表统计特效源码
jQuery实现的滚动切换图表统计特效源码是一段全屏滚动的企业当月运营报告数据统计图表代码,涵盖流行的线性、圆形、柱形图统计方式,适应于绝大多数企业,欢迎感兴趣的朋友前来下载参考。
25 2
|
2月前
|
JavaScript
jQuery制作的网站首页宽屏导航轮播图特效源码
jQuery制作的网站首页宽屏导航轮播图特效源码是一段基于jQuery制作的可用于商城首页 微商城 互联网公司或某些电子商城的首页特效,自带有二级菜单栏、轮播图滚动、登录注册按钮等等,非常全面,欢迎对此段代码感兴趣的朋友前来下载使用。
26 4
|
8月前
|
JavaScript 前端开发
jquery实现二级导航下拉菜单效果实例
jquery实现二级导航下拉菜单效果实例
119 0
|
JavaScript
jQuery实现大屏滚动播放的效果
jQuery实现大屏滚动播放的效果
71 0
|
JavaScript
jQuery实现消息滚动播放的效果
jQuery实现消息滚动播放的效果
57 0
|
JavaScript 前端开发
jquery导航选中按钮颜色变化
jquery导航选中按钮颜色变化
55 0
|
JavaScript 前端开发
jQuery 页面顶部滚动中固定导航栏
jQuery 页面顶部滚动中固定导航栏
42 0
|
前端开发 JavaScript
JQuery——BreakingNews.js新闻滚动效果
BreakingNews.js新闻滚动效果
106 0