Question

jquery判断滚动条与头部距离

如图，想根据滚动条滚动的距离让层显示。但是除了第一个显示了之后……滚动条往下滚……后面的都不显示
通过alert判断……不管怎么滚动 获取的值都是0

Answer 1

你这个肯定不行啊，你在页面加载完成后就立即进行了判断，这个时候滚动条距离顶部为0。

根本原因是你没有绑定滚动条的滚动事件。

//绑定滚动事件
$(document).scroll(function(){
    //todo code
});

Answer 2

这是我刚给你手写的，你对照看看：

<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
	$(document).scroll(function(){
		var top = $(document).scrollTop();
		if(top < 300)
			$(".tree01").show();
		else if(top < 600)
			$(".tree02").show();
		else if(top < 900)
			$(".tree03").show();
	});
});
</script>
<div style="height:300px;"></div>
<div class="tree01" style="width:300px;height:300px;background-color:red;display:none;"></div>
<div class="tree02" style="width:300px;height:300px;background-color:blue;display:none;"></div>
<div class="tree03" style="width:300px;height:300px;background-color:green;display:none;"></div>
<div style="height:3000px;"></div>

Answer 3

// 滑动滚动条
$(window).scroll(function(){
// 滚动条距离顶部的距离 大于 200px时
if($(window).scrollTop() >= 200){
$(".scroll_top").fadeIn(1000); // 开始淡入
} else{
$(".scroll_top").stop(true,true).fadeOut(1000); // 如果小于等于 200 淡出
}
});