根據滾動條位置觸發事件

在項目中，我們經常需要根據滾動條的位置去觸發一些事件。以下是代碼是 判斷元素是否出現在可視區域來觸發一些事件，比如淡出淡出、左右滑動等動畫效果。

<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>