faire un onepage avec scroll
Bonjour,
Je suis en train de faire un petit site et je voulais faire un truc qui me paraissait en apparence simple mais je me rend compte que je galere et que je ne trouverai pas tout seul :/
j'ai une page html diviser comme ça
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<header id = "tete">
</header>
<section id = "first">
</section>
<section id = "second">
</section>
<section id = "third">
</section>
<section id = "four">
</section> |
Chaque section fait la même taille et est fonction du navigateur du client
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var tete = document.getElementById('tete');
var first = document.getElementById('first');
var second = document.getElementById('second');
var third = document.getElementById('third');
var four = document.getElementById('four');
var H_screen = window.innerHeight;
var teteH = tete.style.height = H_screen;
var firstH = first.style.height = H_screen;
var secondH = second.style.height = H_screen;
var thirdH = third.style.height = H_screen;
var fourH = four.style.height = H_screen; |
L'idée c'est que si l'utilisateur se situe sur l'id "tete" alors si il fait un scroll vers le bas il aille directement (avec une animation fluide) sur le haut de la div "first"
Si il est sur la div "first", qu'il affiche la div "tete" si il scroll vers le haut et la div "second" si il scroll vers le bas.
J'ai essayer avec add event listener, j'ai essayer avec des ancres, en essayant de récupérer la position du y.
La seule chose que je j'ai pas fait c'est faire ça en mode slide vertical. Qu'est ce que vous en pensez?
