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 :
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 // // 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; }); });
Merci beaucoup par avance,
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"); } }); });//]]>
Partager