Discussion :

[Mackgregor]

Bonjour, je viens vers vous car j'ai un problème de comptabilité entre deux scripts sur mon site web.

Sans plus attendre, voici les scripts : (Il s'agit d'un script SmoothScroll en premier et un autre pour faire disparaitre un logo au bout de 100px scrollé)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
// SCROLL DOUX
 
$(document).ready(function(){
    // au clic sur un lien
    $('a[href^="#"]').on('click', function(evt){
       // bloquer le comportement par défaut: on ne rechargera pas la page
       evt.preventDefault(); 
       // enregistre la valeur de l'attribut  href dans la variable target
	var target = $(this).attr('href'); // le sélecteur $(html, body) permet de corriger un bug sur chrome et safari (webkit) 
	$('html, body')
       // on arrête toutes les animations en cours 
       .stop(true)
        //on fait maintenant l'animation vers le haut (scrollTop) vers notre ancre target (-20 pixels pour que ça respire) 
       .animate({scrollTop: $(target).offset().top-20}, 1000 );
    });
});
 
// FIN SCROLL DOUX
 
 
 
 
// DISPARITION LOGO MENU
 
var hauteurScroll = 100; // XXX, c'est le nombre de pixels à partir duquel on déclenche le tout
$(function(){
  $(window).scroll(function () {//Au scroll dans la fenetre on déclenche la fonction
     if ($(this).scrollTop() > hauteurScroll) { //si on a défile de plus de XXX (variable "hauteur) pixels du haut vers le bas
           $('#logo_menu').stop(true).animate({top:-400},"fast");// On slide vers le haut
		    $('#logo_miniature').stop(true).animate({top:0},"slow"); // On slide vers le bas
     } else {
           $('#logo_menu').stop(true).animate({top:0},"slow"); // ON slide vers le bas
           $('#logo_miniature').stop(true).animate({top:-60},"slow");
 
     }
  });
});
 
//FIN DISPARITION LOGO MENU

Pour voir le problème de vos propres yeux, aller sur http://www.bouguygraph.com (soyez gentil, c'est ma modique fierté car j'ai tout fait tout seul ! :p)
Cliquez sur un des boutons du menu, vous verrez que la div "logo_menu" semble être bloquée tant que le scroll n'est pas fini et c'est justement ça que je voudrais résoudre...

Avez-vous une solution ? Merci à vous !

[danielhagnoul]

Vous usez et abusez de .stop(true), je pense que vos soucis viennent de là car la gestion de la chose peut être complexe.

Voir : http://www.developpez.net/forums/d13...p/#post7324692

[kalimukti]

Hello,

De ce que j'ai pu testé, ce n'est pas un conflit avec votre premier script (même en le commentant, le comportement qui vous gêne continue de même),
mais avec, comme le remarque justement Daniel, un abus des .stop(true) et un comportement particulier de scroll...

avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var larg_nav = (document.body.clientWidth);
$(function(){
  $(window).scroll(function () {//Au scroll dans la fenetre on déclenche la fonction 
	 if ($(this).scrollTop() > hauteurScroll) { //si on a défile de plus de XXX (variable "hauteur) pixels du haut vers le bas
           $('#logo_menu').animate({top:-400},"slow");// On slide vers le haut
		    $('#logo_miniature').animate({top:0},"slow"); // On slide vers le bas
     } else {
           $('#logo_menu').stop(true).animate({top:0},"slow"); // ON slide vers le bas
		   $('#logo_miniature').animate({top:-60},"slow");
 
     }
  });
});

(seul le stop du slide vers le bas de #logo_menu est conservé)
Le comportement du logo est plus propre, mais il n'est quand même déclenché qu'à la fin du scroll.
De ce que je sais, c'est de toute façon le comportement que vous aurez sur certains mobiles... par contre, je ne comprends pas pourquoi vous l'avez ici...
EDIT: avec une écoute sur le début de l'animation:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
        $('#logo_menu').animate({
           	      top:-400,
            	      queue: false
            	},{
  		      start: function( now, fx ) {
    		           console.log("start" );
    		}	
	},"slow");// On slide vers le haut

On voit que l'animation démarre dès que le scroll s'arrête et redémarre ensuite tant que le scroll ne se déclenche pas à nouveau... (sous Chrome, en tout cas).
Comportement bizarre, que tu dois pouvoir mieux maitriser avec des fonctions JQUERY du style Debounce (JSFiddle).

[kalimukti]

Re-,
CE comportement de scroll et animate me turlupinait, du coup, j'ai continué à creuser: en fait, le problème est que l'event scroll se déclenche plein de fois et très très vite pdt que l'utilisateur scroll, du coup, à chaque fois, l'animate est déclenché, redéclenché.... très vite, sans même arriver à son "start"... animate n'y arrive que quand le dernier event scroll est déclenché...

voilà le code qui règle ce problème:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
$(function(){
var animBiglogo = false;
  $(window).on("scroll", function () {//Au scroll dans la fenetre on déclenche la fonction 
     if ($(this).scrollTop() > hauteurScroll) { //si on a défile de plus de XXX (variable "hauteur) pixels du haut vers le bas
	  if(animBiglogo === false)
         { 
        	animBiglogo = true;
           	$('#logo_menu').animate({top:-400}, "slow");// On slide vers le haut
		    $('#logo_miniature').animate({top:0},"slow"); // On slide vers le bas
	 } 
 
     } else {
     	if(animBiglogo === true)
        {
        	animBiglogo = false;
           	$('#logo_menu').stop(true).animate({top:0},"slow"); // ON slide vers le bas
		   	$('#logo_miniature').animate({top:-60},"slow");
	}
 
     }
  });
});

cela permet de ne déclencher l'animate qu'une seule fois, dès que le scroll est déclenché

[Mackgregor]

C'est génial, ça marche comme sur des roulettes, je vais relire tout ce que tu m'a dit pour bien comprendre l'erreur.

Si j'ai bien compris tu as remis une condition dans chacune des conditions initiales pour permettre à l'animation de ne se déclencher qu'une seule fois grâce à une vérif booléenne.

Je peux me permettre une dernière question qui cette fois je pense sera beaucoup plus facile ?
Si je veux englober tout ce processus d''une condition par exemple : Largeur de la fenêtre > 768px ? Si OUI : Lancer l'anim / Si NON : Ne pas lancer
Ça peut parraitre tout con mais j'ai énormément de mal avec la syntaxe et la logique des IF / ELSE.
En fait je vais parraître encore plus débile mais j'ai encore plus de mal avec toutes les accolades et parenthèses en fin de code (surtout quand il y a trois conditions du coup), j'en ai toujours en trop, pas assez ou dans le mauvais ordre...

[Invité]

Bonjour,

Bravo pour ton site.
Cependant, il présente mal sur smartphone (pour largeur inférieure à 480px) :

• bande logo + menu trop imposant (1/3 de l'écran)
• contenu qui sort de l'écran *

* dans ton CSS, on trouve :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.about, .portfolio {
......
    min-width: 465px;
}

Sinon, concernant les accolades : c'est tout l’intérêt d'un code bien indenté qui facilite la lecture et le débogage.