菜单悬停效果 

1 <div class="cont">
2     <div id="top"> </div>
3     <div id="nav" class="nav"> </div>
4 </div>
5 <div style="height:1000px;"></div>
1  #top{width:100%;height:50px;border:1px solid red;}
2  .nav{width:1080px;height:50px;background:green;margin:0px auto;}
3  .scoll_nav{width:100%;position:fixed; top:10px;  z-index:10000;}
 1     $(document).ready(function(e) {                                   
 2         $(window).scroll(function() {
 3           if($(window).scrollTop() >  $("#top").height()+10){
 4                  $("#nav").addClass("scoll_nav")
 5             }
 6           else{
 7                  $("#nav").removeClass(    "scoll_nav")
 8             }
 9        });                                       
10     })

 

posted @ 2014-10-18 13:47  未来动力  阅读(314)  评论(0)    收藏  举报