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
}
}) |
