根据滚动条位置触发事件

在项目中，我们经常需要根据滚动条的位置去触发一些事件。以下是代码是 判断元素是否出现在可视区域来触发一些事件，比如淡出淡出、左右滑动等动画效果。

<div id="box">
    
</div>
<script>
    $(window).scroll(function(){
	if($('#box').offset().top >= $(window).scrollTop() &&   $('#box').offset().top < ($(window).scrollTop() + $(window).height())){
		// 元素出现在可视区域后要做的事、、、
	}else {
		// 元素离开可视区域后要做的事、、、
	}
    })
</script>

　　举个例子：当#box 滚动到可视区域时 #box 中的 h1 透明度由 0 变成 1

<style>
     #box h1 {
        opacity: 0;
        transition: all 1s;
	--o--transition: all 1s;
	--moz--transition: all 1s;
	--webkit--transition: all 1s;
        // 突然出现太生硬 加个过度吧
}
</style>
<div id="box">
    <h1>可爱的h1</h1>
</div>
<script>
    $(window).scroll(function(){
	if($('#box').offset().top >= $(window).scrollTop() &&   $('#box').offset().top < ($(window).scrollTop() + $(window).height())){
		$('#box h1').css('opacity','1');
                // 元素离开可视区域后要做的事、、
	}else {
                $('#box h1').css('opacity','0');
		// 元素离开可视区域后要做的事、、、
                //当然你也可以让 h1 只出现 不消失  else 就可以什么都不写
	}
    })
</script>