Changer l'opacité d'une div lors du scroll

Eritou Messages postés 110 Date d'inscription Statut Membre Dernière intervention -
Eritou Messages postés 110 Date d'inscription Statut Membre Dernière intervention - 9 sept. 2015 à 19:56

Bonsoir,
Je possède une barre de nav d'une hauteur de 80 px (#white dans l'exemple ci-dessous) transparente que j'aimerais blanche (sans transparence) lors d'un scroll de 80px vers les bas.
J'ai trouvé un script sur le net mais malheureusement mes connaissances (0) m'empêchent de l'adapter comme il faut :(
Si quelqu'un peut me venir en aide (et en profiter pour m'expliquer, si cela est possible ;) ?
Vu la taille du code de la page, je vous l'envoie en entier :

<html>
<head>
<title>nav</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#white{
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	height:80px;
	background-color: white;
	opacity: 0;
}
 
.cover{
	height: 100%;
	width: 100%
}
</style>
</head>
 <body style="margin: 0; padding: 0;">
 
	<div id="white"></div>
 
	<div id="contenu">
		<img class='cover' src='http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/1.jpg' alt='' />
	</div>
 
	<div>
		<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/>
	</div>
 
	<script>
		$(document).on('scroll',function(){
			opacite = 1 - ( $(document).scrollTop() / $("#contenu").outerHeight( true ) ) ;
			$('#white').css('opacity', opacite);
		});
	</script>
</body>

Bonne soirée,
E.

A voir également:

Changer l'opacité d'une div lors du scroll
Changer dns - Guide
Changer carte graphique - Guide
Changer wifi chromecast - Guide
Changer clavier qwerty en azerty - Guide
Changer extension fichier - Guide

2 réponses

Réponse 1 / 2

Venega

B'soir,
c'est juste des math:

$(document).on('scroll',function(){
//---quand ça bouge

			opacite = 1 - ( $(document).scrollTop() / $("#contenu").outerHeight( true ) ) ;
/*----------- on calcule le rapport
scrollTop() c'est le nombre de pixels depuis le haut de la page
outerHeight(true) c'est la hauteur totale(maxi) de la page
1 pour une opacité de 100%(visible), 0.5 pour 50%(transparence de moitié etc..).
*/


			$('#white').css('opacity', opacite);
// ---change la valeur de l'opacité en CSS pour le rapport calculé sur 1
		});

Pour avoir un rapport pour 80px c'est
(1*nombre pixels défilés/80)
En code

			opacite = 1 - ( $(document).scrollTop() / 80 ) ;
$('#white').css('opacity', opacite);

Sauf que ça peut poser des problèmes une opacité supérieure à 1(=100% on peut pas faire plus opaque).

alors on rajouter une condition si c'est le cas

;
if(opacite>$(document).scrollTop()){
opacite=1;
}else{
opacite = 1 - ( $(document).scrollTop() / 80 ) 
}
$('#white').css('opacity', opacite);

Réponse 2 / 2

Eritou Messages postés 110 Date d'inscription Statut Membre Dernière intervention 4

Bonsoir Venega et merci pour toutes ces explications :)
Si j'ai bien compris, le script devrait être :

		$(document).on('scroll',function(){
			opacite = 1 - ( $(document).scrollTop() / 80 );
			$('#white').css('opacity', opacite);
			if(opacite>$(document).scrollTop()){
opacite=1;
}else{
opacite = 1 - ( $(document).scrollTop() / 80 ) 
}
$('#white').css('opacity', opacite);

		});

Avec ceci, #white est bien d'une opacité:0, mais lors d'un scroll de qq pixels, la div devient d'une opacité d'environ 0.9 jusqu'à atteindre 0 quand on scrolle de 80 px (sorte de transition). Par contre, si après on scrolle vers le haut, la div est bien opaque (???) alors qu'elle devrait être "transparente" à top:0 (et donc opaque à Top:80px).
Cela viendrait-il de mes CSS ?
Merci pour ton aide et bonne soirée,
E.

Changer l'opacité d'une div lors du scroll

2 réponses

Votre réponse

Discussions similaires