CSS changes on scroll, but with the scroll speed

Question

I want to do the usual "header changes on scroll". Right now the "change" animation is pure CSS3 Animation, which means that the animation runs on its own, but I want it to run simultaneous to the speed of the scrolling.

Right now:

<script type="text/javascript">
    $(document).on("scroll",function(){
        if($(document).scrollTop()>100){
            $("#header").removeClass("large").addClass("small");
        } else{
            $("#header").removeClass("small").addClass("large");
        }
    });
</script>

This is what I did (and you can see why I want to have animation/scrolling connected): http://thomasmaier.me/beispiel/

This is an example of what I want: http://www.apple.com/imac-with-retina/. (you might have to wait a bit until the huge wallpaper appears. When you scroll, the css changes at the same speed as the scrolling).

How can I do this (with jQuery)? (I am no pro) Or do you have a better, more beautiful solution?

Best

Thomas

Answer 1

Add the HTML attribute(onscroll) to which ever parent block you will be doing your scrolling.

//HTML BLOCK

<main onscroll = myfunction(event) </main>   //make sure you pass the event parameter

//JS BLOCK

function myfunction(e){
   window.MainBlock = e.target; //set event element to a variable
   window.ScrollVert = e.scrollY; //live feed of vertical scroll position

   //add simple if statement based on values to change zoom value based on the scrollY.
   MainBlock.style.zoom = "100%"
}
//CSS BLOCK
.main {
  zoom: 150%;
}