页面向下滑动导航栏固定

--------------------------------html----------------------------

<div id="ad">
广告栏
</div>
<div id="nav">
导航栏
</div>

<!--右下角滚回到顶部图标-->
<div id="huojian">

</div>
<div class="mian">
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
<h1>XXXX</h1>
</div>

-------------------------------------------------------css---------------------------------

#ad{
width: 400px;
height: 400px;
margin: 0 auto;
background-color: #87CEEB;
}
#nav{
width: 100%;
height: 100px;
background-color: black;
}
#huojian{
width: 100px;
height: 100px;
background-image: url(img/播放.jpg);
background-size: 100% 100%;
position: fixed;
right: 100px;
bottom: 100px;
}

----------------------------------------js----------------------------------

//监听滚动事件
window.onscroll = function(e){
var navDiv = document.querySelector('#nav')
if(window.pageYOffset > 300){
navDiv.style.position = 'fixed'
navDiv.style.top = 0
navDiv.style.left = 0
}else{
navDiv.style.position = 'static'
navDiv.style.top = 0
navDiv.style.left = 0
}
}
window.onload = function(){
var hj = document.querySelector('#huojian');
hj.onclick = function(){
var y = window.pageYOffset;
var step = 50;
//逐渐加快
step ++
//设置过度
var interId = setInterval(function(){
y = y-step
if(y<=0){
y = 0;
clearInterval(interId);
}
scrollTo(0,y)
})
}
}