Já havia respondido questão semelhante aqui.
Para fazer isso, tem que calcular a distância do elemento até o topo do documento menos o scroll, e subtrair pela altura visível da janela.
Adicionei uma variável aparecer
que é a porcentagem em que o elemento estiver visível na janela para alterar a cor de fundo:
$(window).on("scroll",function(){
var aparecer = 50; // porcentagem (neste caso, é a metade, 50%)
var eleHeight = $('#div').outerHeight(); // altura da div
var eleTopo = $('#div').offset().top; // distancia da div ao topo do documento
var scrlTopo = $(window).scrollTop(); // quanto foi rolada a janela
var distance = eleTopo-scrlTopo; // distancia da div ao topo da janela
var altJanela = window.innerHeight; // altura da janela
if(distance <= altJanela-(eleHeight*(aparecer/100))) {
$("#div").css("background","blue");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Role para baixo
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<div id="div" style="display: block; width: 300px; height: 200px; background: red;">
Texto texto texto texto
</div>