顶部滚动到一定距离标题栏会固定

html 部分

<div class="box">
<div class="tc">我是滚动君被遮罩的距离</div>
<div id="nav">
<ul class="nav_box cleara">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
</ul>
</div>

</div>

css 部分

.box{
height: 1800px;
}
.tc{
width:auto ;
height:200px ;
background:#f39800 ;
}
.cleara:after{
clear: both;
content:"";
display: block;
visibility: hidden;
}
#nav{
background:#2378e1 ;
width:100% ;

}
.nav_box{
width:1200px ;
margin:0 auto ;
}
.nav_box li{
list-style:none ;
width:200px ;
text-align: center;
height:30px ;
line-height:30px ;
color:#fff ;
float: left;
}
.active{
position: fixed;
top:0;
left:0;
z-index:99;
}

js部分

window.onscroll=function(){

var osTop=document.documentElement.scrollTop||document.body.scrollTop;

var tc=document.getElementsByClassName('tc')[0];
var divHeight=tc.offsetHeight;
if(osTop >= divHeight){
nav.className='active';
}
if(osTop<=200){
nav.className='';
}

}