Sujet Précédent Sujet Suivant

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

Fermé
Eritou Messages postés 110 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 8 sept. 2015 à 20:50
Eritou Messages postés 110 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 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:

2 réponses

Réponse 1 / 2
Venega
9 sept. 2015 à 00:21
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);
1
Réponse 2 / 2
Eritou Messages postés 110 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
9 sept. 2015 à 19:56
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.
1

Discussions similaires

A quoi sert la touche "scroll lock" ?
LAKESSE -
loutre -

5 réponses
Scroll Lock actif
Sylvie -
captainejojo -

17 réponses
Mettre Facebook Messenger en français
bleumarine2009 -
lauredine61 -

1 réponse
Où est la touche arrêt défil sur mon clavier ?
munette -
inconnusoldat -

48 réponses