顶部滚动到一定距离标题栏会固定
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='';
}
}