var product = $('.product').css({'opacity': '0'});
product.each(function(){
var prod = $(this);
var prodPos = prod.position().top;
$(window).scroll(function() {
var pos = $(window).scrollTop();
var windoww = $(window).height();
if (pos > prodPos - (windoww - 100)) {
prod.animate(({'opacity': '1'}))
}
})
});
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><circle fill="#064687" cx="256" cy="256" r="248"/><path fill="#fff" d="M389.7 224h-182.6l75.5-72.4c9.7-9.3 9.9-24.8.4-34.3l-11-10.9c-9.4-9.4-24.6-9.4-33.9 0l-132.7 132.6c-9.4 9.4-9.4 24.6 0 33.9l132.7 132.7c9.4 9.4 24.6 9.4 33.9 0l11-10.9c9.5-9.5 9.3-25-.4-34.3l-75.5-72.4h182.6c13.3 0 24-10.7 24-24v-16c0-13.3-10.7-24-24-24z"/></svg>