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');
}
})
吾日三省吾身,脚踏实地~

浙公网安备 33010602011771号