Событие при появлении подвала в зоне видимости экрана

var $element = $('footer'); 
let counter = 0; 
 
$(window).scroll(function() { 
  var scroll = $(window).scrollTop() + $(window).height(); 
 
  //Если скролл до конца елемента 
  //var offset = $element.offset().top + $element.height(); 
 
  //Если скролл до начала елемента 
  var offset = $element.offset().top 
 
  if (scroll > offset && counter == 0) { 
    alert('footer!'); 
    counter = 1; 
  } 
});

header { 
  height: 100px; 
  background: #ccc; 
} 
 
.content { 
  background: tomato; 
  height: 2000px; 
} 
 
footer { 
  height: 400px; 
  background: #222; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
  header 
</header> 
 
<div class="content"> 
  content 
</div> 
 
<footer> 
  footer 
</footer>

let counter = 0; 
 
window.addEventListener("scroll", function() { 
  var elementTarget = document.querySelector("footer"); 
  //Если начало футера 
  //if(...  > (elementTarget.offsetTop - elementTarget.offsetHeight) 
  //Если конец футера 
  //if(... > (elementTarget.offsetTop)) 
  (elementTarget.offsetTop - elementTarget.offsetHeight) 
  if (!counter && window.scrollY > (elementTarget.offsetTop - elementTarget.offsetHeight)) { 
    alert("footer!"); 
    counter = 1; 
  } 
});

header { 
  height: 100px; 
  background: #ccc; 
} 
 
.content { 
  background: tomato; 
  height: 2000px; 
} 
 
footer { 
  height: 400px; 
  background: #222; 
}

<header> 
  header 
</header> 
 
<div class="content"> 
  content 
</div> 
 
<footer> 
  footer 
</footer>