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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113
|
$(document).ready(function() {
// On déclare les varialbes des sections
var section1 = document.getElementById('section1');
var section2 = document.getElementById('section2');
var section3 = document.getElementById('section3');
var section4 = document.getElementById('section4');
var section5 = document.getElementById('section5');
// On déclare le ul du nav
var menu1 = document.getElementById('menu1');
//On ecoute le scroll de la souris
if (window.addEventListener){
// IE9, Chrome, Safari, Opera
window.addEventListener("mousewheel", wheel, false);
// Firefox
window.addEventListener("DOMMouseScroll", wheel, false);
}
// IE 6/7/8
else window.attachEvent("onmousewheel", wheel);
// On normalize le scroll de la souris pour l'evenement window
function wheel(event){
var e = window.event || e;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
} else if (event.detail) { /* Mozilla case. */
delta = -event.detail/3;
}
if (delta)
handle(delta);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
// On définit la valeur du scroll de la souris
function handle(delta) {
if (delta < 0) {
if (menu1.children[0].className == "active"){
scrolldown(section2, 0, 1000)
} else if (menu1.children[1].className == "active"){
scrolldown(section3, 1, 1000)
} else if (menu1.children[2].className == "active"){
scrolldown(section4, 2, 1000)
} else if (menu1.children[3].className == "active"){
scrolldown(section5, 3, 1000)
}
} else {
if (menu1.children[1].className == "active"){
scrollup(section1, 1, 1000)
} else if (menu1.children[2].className == "active"){
scrollup(section2, 2, 1000)
} else if (menu1.children[3].className == "active"){
scrollup(section3, 3, 1000)
} else if (menu1.children[4].className == "active"){
scrollup(section4, 4, 1000)
}
}
}
// On définit le changement de de class des li du menu et la vitesse de défilement d'une page à l'autre avec un scrolldown
// Pour savoir dans quel section je me situe j'utilise un menu sur la gauche (menu.children[i]) auquel j'applique une class 'active' ou 'desactive' selon ou je me situe.
// le menu.children[0] est en class 'active' au chargement de la page, si je scroll une fois vers le bas menu.children[0] prend la class 'desactive' et menu.children[1] prend la classe active
function scrolldown(e, i, s){
menu1.children[i].className = "desactive"
menu1.children[i+1].className = "active"
var page = $(e); // Page cible
var speed = s; // Durée de l'animation (en ms)
$('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
return false
}
// On définit le changement de de class des li du menu et la vitesse de défilement d'une page à l'autre avec un scrollup
function scrollup(e, i, s) {
menu1.children[i].className = "desactive"
menu1.children[i-1].className = "active"
var page = $(e); // Page cible
var speed = s; // Durée de l'animation (en ms)
$('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
return false
}
}) |
Partager