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');
	}
})
posted @ 2022-10-17 10:35  慕雪琳鸢  阅读(27)  评论(0)    收藏  举报