Een sticky menu

• Een sticky menu blijft boven aan de pagina zichtbaar als er gescrolld wordt. In deze variant verbergt het menu zich bij het scrollen naar beneden echter wel. Hij wordt pas 'sticky'als je terugscrollt.
• Hiervoor is wat jQuery nodig. Deze tutorial gaat ervan uit dat je weet hoe je en menu maakt. Probeer zoveel mogelijk een eigen invulling te geven aan deze training.
  • gebruik een eigen inhoud;
  • een eigen menu;
  • of breidt het geheel uit voor een menu inclusief een header!
  • ook in het script kies je zelf voor namen voor variabelen en functies.
• Zet jouw training zo snel mogelijk op Github, plaats geregeld commits en het uiteindelijke resultaat ook online.

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.

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.