网页下滑超过一定高度时添加类名(以顶部导航为例)

//　　html部分

    <header class="header">
        <div class="container all_top_nav clearfix contentAll">
            <div class="fl left">
                <a href="javascript:void(0)"><img src="images/logo2.png" alt="" class="img1" /></a>
                <a href="javascript:void(0)"><img src="images/logo_dark.png" alt="" class="img2" /></a>
            </div>
            <div class="fr nav">
                <ul class="navbar_nav" data-in="fadeInUp" data-out="fadeOutUp">
                    <li class="active">
                        <a href="index.html">首页</a>
                    </li>
                    <li class="dropdown">
                        <a href="product.html">
                            产品
                        </a>
                        <div class="dropdown_menu">
                            <a href="product_sales_operation.html">销售与运作计划</a>
                            <a href="supply_chain.html">供应链计划</a>
                            <a href="product_scheduling.html">生产排程</a>
                        </div>
                    </li>
                    <li>
                        <a href="javascript:void(0)">解决方案</a>
                    </li>
                    <li class="dropdown">
                        <a href="javascript:void(0)">关于我们</a>
                        <div class="dropdown_menu">
                            <a href="about.html">关于我们</a>
                            <a href="news.html">新闻资讯</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </header>

//　　js部分

$(function(){
　　//超过一定高度导航添加类名
　　var nav=$("header"); //得到导航对象  
　　var win=$(window); //得到窗口对象  
　　var sc=$(document);//得到document文档对象。  
　　win.scroll(function(){  
　　　　if(sc.scrollTop()>=100){  
　　　　　　nav.addClass("on");   
　　　　}else{  
	　　nav.removeClass("on");  
　　　　}  
　　})
}

//　　css部分(当下滑高度为100时,js为"header"标签添加了class为"on"的类名),"on"的样式为

.on{
    background: #fff;
    border-bottom: 0.1rem solid #ccc;
}