How to show and hide element according to scroll?

Navigation
1

I want to hide the image when scroll of the page is greater than 147, so that's fine, the problem is that I can not hide the image again when scroll is less than 146. The goal is to hide and show the image according to the scroll.

Below is 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><imgsrc="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 anyone help me?

    
asked by anonymous 16.04.2018 / 19:12

1 answer

1

My dear is missing a "#" in your script

More precisely here: if(scroll < 146 ) $("img-logo-fixed") was missing # from ID

See working fine on this snippet, I just added # as diti and got 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><imgsrc="http://lucianodev.com/gameutil2d/site/imagens/icone-android.png" id="img-logo-fixed"  >

If you want to make a smooth transition of the image appearing use fadeIn and fadeOut . See how it looks in the example. So you do not need 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><imgsrc="http://lucianodev.com/gameutil2d/site/imagens/icone-android.png" id="img-logo-fixed"  >
    
16.04.2018 / 19:20
Adjust product list in woocommerce to stay aligned correctly Is it possible to change the css3 of the table (in JqGrid) to change the positioning on the page?