两侧广告渐变出现渐变隐藏

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function(){

//定位div距离浏览器顶部的距离


var navH = 820;


//滚动条事件

$(window).scroll(function(){

//获取滚动条的滑动距离

var scroH = $(this).scrollTop();

//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就渐变出现，反之就渐变隐藏

if(scroH>=navH){

$(".nav").fadeIn( 1000 );//1000是时间1秒

}else if(scroH<navH){

$(".nav").fadeOut( 1000 );

}

}
)

}) 

</script>

<!--下面是实验的div代码-->

<div style="background-color:#063;  height:820px"></div>
  <div class="nav" style=" position: fixed ! important; display:none; left: 50px; top:150px; background-color:#900; width:100px; height:100px;"></div>