Mes fonctions javascript ne fonctionnent plus
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:
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:
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,