Ik heb een header die altijd zichtbaar blijft aan de bovenkant van de pagina. Als men naar beneden scrolt, moet deze iets kleiner worden in de hoogte. Dit wil ik doen m.b.v. JQuery animate. Als men weer naar boven scrolt moet de originele hoogte weer herstelt worden. Iemand een idee hoe ik dit kan doen?
- jQuery scroll effect
-
08-01-2014, 19:03 #1Particulier
- Berichten
- 1.475
- Lid sinds
- 16 Jaar
jQuery scroll effect
-
In de schijnwerper
Zie gratis & direct hoe jouw website op SEO scoort via SaySEO.nlPromotie21 websites met bezoekers | Vanaf 50 euro per website | Alleen deze weekWebsite te koopLeuke voetbal affiliate shop met inkomsten: Voetbaltrainingspak.nlWebsite te koopadult, kamagra, casino adverteren bij 700.000 bezoekersAdvertentieruimte -
08-01-2014, 19:59 #2Particulier
- Berichten
- 1.412
- Lid sinds
- 15 Jaar
Re: jQuery scroll effect
Zo ongeveer:
Code://Bij laden script uitvoeren $(function() { //event verbindne met onscroll //Als gebruiker scrollt wordt dit uitgevoerd $(document).on('scroll',function(){ var ScrollHeight = $(document).scrollTop(); if(ScrollHeight == 0){ //Gebruiker is bovenaan pagina }else{ //Gebruiker zit niet bovenaan de pagina } }) }
-
09-01-2014, 18:55 #3Particulier
- Berichten
- 1.475
- Lid sinds
- 16 Jaar
Re: jQuery scroll effect
Thanks! Hier de oplossing:
Code:jQuery.noConflict(); jQuery(document).ready(function() { jQuery(document).on("scroll", function() { if(jQuery(document).scrollTop() > 140) { // Change header height to 120px jQuery("#header").animate({ height: "120px" }, "fast"); } else { // Reset header height to 140px jQuery("#header").animate({ height: "140px" }, "fast"); } }); });
Laatst aangepast door RoyB : 09-01-2014 om 19:02
-
09-01-2014, 19:03 #4Particulier
- Berichten
- 1.412
- Lid sinds
- 15 Jaar
Re: jQuery scroll effect
Goed bezig!
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic