JS 版
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#showIt {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 1500px;
}
</style>
</head>
<body style="height:2000px;">
<div id="showIt"></div>
</body>
<script type="text/javascript">
document.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var cHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var oDiv = document.getElementById('showIt');
if (scrollTop > (oDiv.offsetTop - cHeight))
alert('觸發了')
}
</script>
</html>
JQ版
$(document).scroll(function() { sTop = $(this).scrollTop(); //獲取滾動條的位置 var sh = $(window).height();//視口高度 var ft = $("footer").offset().top//指定元素距離文檔頂部高度 // 滾動條位置 大於 指定元素減去 視口高度時 if (sTop > (ft - sh)) { //當底部出現在視口時 觸發 //dododo } }