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?

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 
             }
      })
}

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");
        }
    });
});

Goed bezig!