spiralen

Een sticky menu

dat na terugscrollen weer verschijnt
met jQuery

sticky menu stap 1: JQuery .scrollTop(); (00:06:13)

Met jQuery kun je een menu maken dat bij het naar beneden scrollen uit het venster schuift, maar bij terugscrollen weer inschuift. Het schuiven gaat met de css-eigenschap transition. Een vastzetten van het menu kan al met de eigenschap position: fixed.
jQuery moet goed gekoppeld worden, voordat je eigen script kan gaan werken. Controle kan via console.log(); en we gaan hier na of de scroll-positie van het venster wordt gevonden: $(window).scrollTop(); Deze moet uitgevoerd worden telkens als er gescrolled wordt.

sticky menu stap 2: if-statement (00:09:08)

Er moet worden vastgesteld of er naar boven of naar beneden wordt gescrolled. Dat kan door een tweede variabele te maken, die de vorige scrollpositie heeft.
Is de nieuwe scrollpositie groter, dan is er naar beneden gescrolled, en anders dus naar boven.
Bij het naar beneden scrollen moet de top-waarde van het menu negatief worden en in het andere getal 0. dat kan met .css();

Om het menu precies buiten het venster te krijgen, kun je met .outerHeight(); de hoogte door het script laten vaststellen om hem vervolgens negatief te maken en de eenheid 'px' toe te voegen. De transition-eigenschap van css doet dan de rest.


Inleveren ˆ

Plaats jouw training online en lever het linkje en de link naar Github in via ELO

Een training naar horizontaal menu