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

Fermé

Eritou Messages postés 111 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 111 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:

Changer l'opacité d'une div lors du scroll
Changer dns - Guide
Piratage facebook changer mot de passe - Guide
Changer clavier qwerty en azerty - Guide
Changer police facebook - Guide
Changer carte graphique - Guide

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);

Réponse 2 / 2

Eritou Messages postés 111 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.

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

2 réponses

Discussions similaires

Newsletters