jquery导航栏滚动到一定位置添加特殊样式
导航html代码
<!-- 顶部导航 --> <div class="header animate"> <div class="container" id="headerBox"> <div class="fl header_logo"> <img src="images/logo1.png" alt="" class="header_logo_img animate"/> <img src="images/logo2.png" alt="" class="header_logo_img_te animate"/> </div> <div class="fl nav"> <div class="nav_container"> <ul> <li class="hover"><a href="index.html">首页</a></li> <li><a href="zwServices.html">政务服务</a></li> <li><a href="news.html">新闻资讯</a></li> <li><a href="newTrade.html">新型贸易</a></li> <li><a href="tradeTool.html">贸易工具</a></li> <li><a href="service.html">贸易服务</a></li> </ul> </div> </div> <div class="fr header_rg"> <a href="http://221.215.100.70:7001/buisness-web/#/login">登陆/注册</a> </div> </div> </div>
css代码
.headerActive{background-color:#048be6;}
js代码
$(window).scroll(function(){ var high = $('.header').height(); var scrollTop = $(window).scrollTop(); if(scrollTop > high){ $('.header').addClass('headerActive'); }else{ $('.header').removeClass('headerActive'); } })
吾日三省吾身,脚踏实地~