Opacité graduelle en JS

[xpatval]

Bonjour,

 

Pour un menu de navigation que je souhaite fixe lorsque je scrolle, je règle l'opacité en fonction du nombre de pixel 'scrollé'. Ok, ça fonctionne.

Par contre, je ne trouve pas la solution par une boucle de façon à ce que cette opacité soit modifiée graduellement.

 

Avez-vous une idée ?

 

Mon code basique...:

	document.addEventListener('scroll', function(e) {
		if (window.scrollY > 160) 
		{ 
		document.getElementById('site-navigation').style.opacity = 0.5; 
		}
		else document.getElementById('site-navigation').style.opacity = 1	   
      });	

Où site-navigation est mon ID css.

 

Merci de vos réponses...

[eric73]

en utilisant https://api.jquery.com/fadeto/

[xpatval]

Merci, je vais tester cela...

[poulpe-bleu]

Bonjour, 

Cela dépend le type d'opacité que vous voulez, à savoir si c'est horizontal ou vertical, non ?  

[xpatval]

C'est juste l'opacité d'un élément, donc d'une barre de menu horizontale, en fonction d'un scroll bas et haut.

 

J'ai juste fait celà:

 

jQuery(document).ready(function( $ ){
	var divs = $('#site-navigation');
	$(window).scroll(function(){
		var percent = $(document).scrollTop() / ($(document).height() - $(window).height());
		if (percent < 0.8) 
			{
			divs.css('opacity', 1 - percent);
			var numb = (1 - percent);
			}
		else 
			{
			divs.css('opacity', numb);
			}
	});
});