Per far partire uno script al "raggiungimento del div", cioè quando il div diventa visibile, hai bisogno di conoscere tre cose: l'altezza della finestra, la posizione del div (offsetTop) e la quantità di scroll della finestra.
Una possibile implementazione potrebbe essere la seguente:
codice:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
html,body{
margin:0;
padding:0;
}
#pre{
background:#eee;
height:1500px;
padding:33px;
}
#target{
background:#666;
color:#fff;
height:600px;
}
#scroll_amount{
position:fixed;
top:15px;
right:15px;
background:rgba(0,0,0,0.5);
color:#fff;
width:250px;
padding:40px;
}
#scroll_amount:before{
content:'Scroll pagina in pixel';
font-weight:bold;
display:block;
margin-bottom:5px;
}
</style>
<script type="text/javascript">
var target_top, screen_height;
$(function(){
target_top=$('#target').offset().top;
screen_height=$(window).height();
$('#pre').append('<p>Posizione di #target: '+target_top+'px</p>');
$('#pre').append('<p>Altezza finestra: '+screen_height+'px</p>');
$('#pre').append('<p>Quantità di scroll per far apparire #target: '+Number(target_top-screen_height)+'px</p>');
});
$(window).scroll(function(){
var scroll_amount=$(window).scrollTop();
$('#scroll_amount').text(scroll_amount+'px');
if(scroll_amount>=(target_top-screen_height)){
//qui fai partire lo script
$('#scroll_amount').append('<p><strong>#target è visibile!</strong></p>');
}else{
$('#scroll_amount p').remove();
}
});
</script>
</head>
<body>
<div id="pre"><h1>Above the fold</h1></div>
<div id="target"><h3>Below the fold</h3></div>
<div id="scroll_amount">0px</div>
<div id="target_offset"></div>
</body>
</html>