Een bijschuivend menu

Met JavaScript wordt het navigatiemenu in het venster geschoven als er naar boven gescrolled wordt. Maar het is niet de bedoeling als er naar beneden gescrolled wordt. Dan blijft het menu op de plaats waar deze is.
Er wordt een lang document gemaakt. Het menu komt na de inhoud. Door zijn absolute positionering met top op 0, zal hij boven de inhoud komen.
Met webkit-transition en transition zal een aanpassing van de top-waarde geanimeerd worden.
Ter illustratie wordt in de folter de scroll-positie getoond.
In het script worden variabelen aangemaakt die de DOM elementen bevatten en de scroll-waarden bevatten.
Er wordt voor het venster een event-listener gemaakt, die de gebeurtenis 'scroll' koppelt aan een functie. Die functie stopt dan de pageYOffset van het venster in een variabele.
Hier en link naar de rechten van het kind.

Met een if-statement vergelijken we de oude en nieuwe scroll-waarde. Alleen bij afname wordt de top-waarde van het menu aangepast. De css-transition doet dan de rest.
Vergeet alleen niet dat de style-waarde ook van 'px' moet worden voorzien.

Verfraai jouw training door de inhoud op de slides aan te passen en gebruik te maken van webfonts voor de teksten in de koppen.
Voeg in de footer ook validatieknopjes toe.
Stuur mij afloop een linkje met het het resultaat dat online staat en de link van het resultaat op GitHub.