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
相关文章
|
5月前
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
30 0
|
1月前
|
JavaScript 前端开发
jquery实现二级导航下拉菜单效果实例
jquery实现二级导航下拉菜单效果实例
22 0
|
5月前
|
JavaScript
jQuery实现大屏滚动播放的效果
jQuery实现大屏滚动播放的效果
24 0
|
5月前
|
JavaScript
jQuery实现消息滚动播放的效果
jQuery实现消息滚动播放的效果
23 0
|
5月前
|
JavaScript 前端开发
jquery导航选中按钮颜色变化
jquery导航选中按钮颜色变化
30 0
|
7月前
|
JavaScript 前端开发
jQuery 页面顶部滚动中固定导航栏
jQuery 页面顶部滚动中固定导航栏
24 0
|
Web App开发 JavaScript Android开发
jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
webtouch(webapp)页面,防苹果手机safari浏览器,往上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。
315 0
|
JavaScript
jQuery入门第六章(滚动事件相关)
jQuery入门第六章(滚动事件相关)
74 0
|
JavaScript
jquery品优购电梯导航4-74
jquery品优购电梯导航4-74
88 0
jquery品优购电梯导航4-74
|
JavaScript
jquery品优购电梯导航修复小bug并加上类名-73
jquery品优购电梯导航修复小bug并加上类名-73
74 0
jquery品优购电梯导航修复小bug并加上类名-73