event with scroll javascript

Navigation
0

I have the code below creating the effect of fadein and fadeout with the animate.css library in a scroll event, but when the event occurs applying fadeOut, it reappears until it scrolls, and the other error is that while the scroll is less than 28, it keeps doing and repeating the FadeIn effect, and I want fadeIn to occur only if FadeOut has already been done! 

window.addEventListener('scroll', function(event){ 
			
		var animacao1 = "animated fadeOutUp";
		var animacao2 = "animated fadeInDown";
		var fimanimacao = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
			
		if (window.scrollY > 50) {
			$("#cabecalho .logo").addClass(animacao1);
		}
		if (window.scrollY < 50) {
			$("#cabecalho .logo").removeClass(animacao1);
			$("#cabecalho .logo").addClass(animacao2).one(fimanimacao, function(){
				$(this).removeClass(animacao2);
			});
		}
		});
#cabecalho {
			height: 270px;
			width: 100%;
			background-color: rgba(0, 0, 0, .0);
			position: absolute;
			left: 50%;
			top: 180px;
			transform: translate(-50%, -50%);
		}
		#cabecalho .logo {
			height: 37px;
			width: auto;
			position: absolute;
			left: 40%;
			top: 10%
		}
    #altura{
    height: 1400px;
    }
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="cabecalho">
		<img class="logo" alt="Nome" src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png"></div><divid="altura"></div>
    
asked by anonymous 31.05.2018 / 06:43

1 answer

1

There are errors in your code:

  

1st - I do not know where you got this link to the library, but it did not work here. I used this other here .

     

2nd - You have to first load the CSS then JS , the order in your code is reversed. 

window.addEventListener('scroll', function(event){ 
			
   var animacao1 = "animated fadeOutUp";
   var animacao2 = "animated fadeInDown";
   var fimanimacao = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
			
   if (window.scrollY > 50) {
       $("#cabecalho .logo").addClass(animacao1);
   }
   else if (window.scrollY < 50) {
       $("#cabecalho .logo").removeClass(animacao1);
       $("#cabecalho .logo").addClass(animacao2).one(fimanimacao, function(){
          $(this).removeClass(animacao2);
       });
   }
});
#cabecalho {
  height: 270px;
  width: 100%;
  background-color: rgba(0, 0, 0, .0);
  position: absolute;
  left: 50%;
  top: 180px;
  transform: translate(-50%, -50%);
}
#cabecalho .logo {
  height: 37px;
  width: auto;
  position: absolute;
  left: 40%;
  top: 10%
}
#altura{
   height: 1400px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="cabecalho">
  <img class="logo" alt="Nome" src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png"></div><divid="altura"></div>
    
31.05.2018 / 19:44
How to define multiple variables at once within a trigger in SQLServer orders list lambda