Wyświetlenie obrazu po przeskrolowaniu określonej wartości

Hej!
Stworzyłem na swojej stronie taki bajer, że po zescrolowaniu jej w dół kiedy zniknie główne logo to w prawym górnym rogu pojawia się jego miniaturka i "jedzie" dalej razem ze stroną.

Wszystko działało ok do momentu kiedy zainstalowałem certyfikat SSL (powiązałem to z tym ale nie wiem czy faktycznie miał on jakiś wpływ).

Teraz miniaturka wyświetla się cały czas zamiast pojawić się dopiero po scrollowaniu.

	<script>
$(document).ready(function () {
  $('#top-nav').hide();
});
$(document).scroll(function (e) {
    if (document.body.scrollTop >= 240) {
       $('#top-nav').show(200);
    } else {
      $('#top-nav').hide(200);
    }
});
</script>

<div id="top-nav" class="auxiliary-nav">
		<a href="https://adres.pl"><img style="padding-left: 25px" src="https://adres.pl/logo.png"></a>
</div>

Możecie podpowiedzieć czego brakuje albo jak to zrobić lepiej?

Zadne gotowce u mnie nie dzialaly ;/ Glownie chodzilo o wyswietlenie miniaturki logo po zeskrolowaniu fragmentu strony. Poskladalem wiec sam wszystko najprosciej jak sie dalo i smiga. Wrzucam dla potomnych ;)

<a href="https://link.pl"><img id="minilogo" style="visibility:hidden" src="logo.png"></a>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
var img = document.getElementById('minilogo')

window.addEventListener("scroll", function(){
	var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;
	
if (scrollTop < 260) {
img.style.visibility = 'hidden';
} else {
img.style.visibility = 'visible';
}	
	
}, false)	

</script>