How to show and hide element according to scroll?

Question

I want to hide the image when the scroll page is larger than 147, so far so good, the problem is that I can not hide the image again when the scroll is less than 146. The goal is to hide and show the image according to the scroll.

Below I left an example:

 $(document).ready( () => {     
    var logo = $("#img-logo-fixed");
    $(document).scroll( function() {
      var scroll = $(document).scrollTop();
      if(scroll >= 147)  $("#img-logo-fixed").css("display", "block");
      if(scroll < 146 ) $("img-logo-fixed").css("display", "none");
    });       
   });   

#img-logo-fixed {
  position:fixed;
  top:0;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://lucianodev.com/gameutil2d/site/imagens/icone-android.png" id="img-logo-fixed"  >


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Can someone help me?

Answer 1

My dear is missing a "#" in your script

More precisely here: if(scroll < 146 ) $("img-logo-fixed") lacked the # of ID

Watch it work right on this snippet, just added the # as diti and stayed 100%, showing and hiding.

 $(document).ready( () => {     
    var logo = $("#img-logo-fixed");
    $(document).scroll( function() {
      var scroll = $(document).scrollTop();
      if(scroll >= 147)  $("#img-logo-fixed").css("display", "block");
      if(scroll < 146 ) $("#img-logo-fixed").css("display", "none");
    });       
   });  

html, body {
    width: 100%;
    height: 300%;
    margin: 20px;
    padding: 0;
}
#img-logo-fixed {
  position:fixed;
  top:0;
  display:none;
}

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

<img src="http://lucianodev.com/gameutil2d/site/imagens/icone-android.png" id="img-logo-fixed"  >

If you want to make a smooth transition from the image appearing use the fadeIn and the fadeOut. See how it looks in the example. So you don’t need the CSS giving display block/none. Another thing, if you created the variable use it...

  var logo = $("#img-logo-fixed");

  if(scroll >= 147)  $(logo).fadeIn();
  if(scroll < 146 ) $(logo).fadeOut();

See how it looks in the example:

 $(document).ready( () => {     
var logo = $("#img-logo-fixed");
$(document).scroll( function() {
    var scroll = $(document).scrollTop();
    if(scroll >= 147)  $(logo).fadeIn();
    if(scroll < 146 ) $(logo).fadeOut();
});       
});    

html, body {
    width: 100%;
    height: 200%;
    margin: 20px;
    padding: 0;
}
#img-logo-fixed {
  position:fixed;
  top:0;
  display:none;
}

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

<img src="http://lucianodev.com/gameutil2d/site/imagens/icone-android.png" id="img-logo-fixed"  >