Incompatibilité entre deux scripts ?
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:
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 !
scroll, stop et trigger du scroll
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:
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:
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).
