Discussion :

[JimPasquet]

Hello,

Hier, j'insérais un effet parallaxe sur mon site avec simplement du CSS. Parfait

Par contre, en intégrant le CSS, mes fonctions javascript pour un smooth scrolling et le menu qui change en fonction du scroll ne fonctionnent plus. Mais pourquoi ?

Je pense que ces deux fonctions "s'interbloquent" mais aucune idée pourquoi. Need your help please

Le page sans parralaxe mais avec les fonctions JS qui marchent
Le page avec le parralaxe mais sans les fonctions JS qui marchent pas

Ma fonction smooth scroll :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
// // Smooth Scrolling
        $(document).ready(function() {
          $('.js-scrollTo').on('click', function() { // Au clic sur un élément
            var page = $(this).attr('href'); // Page cible
            var speed = 750; // Durée de l'animation (en ms)
            $('html, body').animate( { scrollTop: $(page).offset().top -100}, speed ); // Go
            return false;
          });
        });

Ma fonction pour changer le menu pendant le 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
 
// Change Menu While Scrolling
          //<![CDATA[
          $(window).load(function(){
          // Cache selectors
          var lastId,
          topMenu = $("#top-menu"),
          topMenuHeight = topMenu.outerHeight()+15,
          // All list items
          menuItems = topMenu.find("a"),
          // Anchors corresponding to menu items
          scrollItems = menuItems.map(function(){
          var item = $($(this).attr("href"));
          if (item.length) { return item; }
          });
 
          // Bind to scroll
          $(window).scroll(function(){
          // Get container scroll position
          var fromTop = $(this).scrollTop()+topMenuHeight;
 
          // Get id of current scroll item
          var cur = scrollItems.map(function(){
          if ($(this).offset().top < fromTop)
          return this;
          });
          // Get the id of the current element
          cur = cur[cur.length-1];
          var id = cur && cur.length ? cur[0].id : "";
 
          if (lastId !== id) {
          lastId = id;
          // Set/remove active class
          menuItems
          .parent().removeClass("active")
          .end().filter("[href=#"+id+"]").parent().addClass("active");
          }
          });
          });//]]>

Merci beaucoup par avance,

[Toufik83]

bonjour,
je crois que c'est la div ayant la classe "parallax" que tu dois animer, et pas le body,html.
essaie :

Code :

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

1
2
 
$('.parallax').animate(...);

au lieu de :

Code :

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

$('body,html').animate(...);

[JimPasquet]

Merci pour ta réponse !

J'ai essayé de modifier : sans succès.

Je continue de chercher...

[Toufik83]

j'ai copié collé le html de ta page qui ne fonctionne pas et enfin c'est comme je t'avais dit, l'animation doit être appliquer sur ".parallax" et pas sur body ni html (smooth scroll).
puis il y'a d'autres choses a modifier dans le code qui contrôle les <a> de l'ul "#top-menu".
en bref le code doit être comme ça

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
 
$(document).ready(function() {
          $('.js-scrollTo').on('click', function() { // Au clic sur un élément
            var page = $(this).attr('href'); // Page cible
            var speed = 750; // Durée de l'animation (en ms)
            $('.parallax').animate( { scrollTop: $(page).offset().top -100}, speed ); // ici ".parallax"
            return false;
          });
});
...
...
//ici tu dois detecter le scroll de ".parallax" et pas de "window"
$('.parallax').scroll(function(){
var fromTop = $(this).scrollTop()+topMenuHeight;
console.log("fromTop :"+fromTop);
/* le reste du code ne change pas....*/
});