3

Quero esconder a imagem quando o scroll da página for maior que 147, até ai tudo bem, o problema é que não consigo esconder a imagem novamente quando o scroll for menor que 146. O objetivo é esconder e mostrar a imagem de acordo com o scroll.

Abaixo deixei um exemplo:

 $(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>

Alguém pode me ajudar?

1 Resposta 1

3

Meu caro está faltando um "#" no seu script

Mais precisamente aqui: if(scroll < 146 ) $("img-logo-fixed") faltou o # do ID

Veja funcionando direitinho nesse snippet, só adicionei o # como diti e ficou 100%, mostrando e escondendo.

 $(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"  >

Se vc quiser fazer uma transição suave da imagem aparecendo use o fadeIn e o fadeOut. Veja como fica no exemplo. Assim vc não precisa do CSS dando display block/none. Outra coisa, se vc criou a variável use-a...

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

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

Veja como fica no exemplo:

 $(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"  >

2
  • Caramba, que falta de atenção. Estou há 10 horas em um projeto, o cansaço já tomou conta de mim. Obrigado!!! Commented 16/04/2018 às 17:29
  • @JorgeMatheus vc precisa de mais café rss! Boa sorte ai que bom que resolveu!
    – hugocsl
    Commented 16/04/2018 às 17:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .