<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 );
}
}
)
})
<div class="nav" style=" position: fixed ! important; display:none; left: 50px; top:150px; background-color:#900; width:100px; height:100px;"></div>
<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>