I'm looking to create a "fixed" header with autoHeight, and when you scroll the content will come over it.

Here's an example
<http://clapat.ro/berger/about.html>

Basically, it's a home/intro section(id #hero), which has an autoheight and using a parallax effect, it looks like the content comes above it when scrolling.

This is what I found looking with inspect element and source code:

The header has autoHeight( ~500px default, 321px when using inspect element ) gets increased top margin and decreased opacity while scrolling:

```
height: 321.3px;
top: 400px;
opacity: -0.246105919003115;

```

Here's some functions I found:

```
function HeroHeight() {
    if( $('#hero').length > 0 ){

        if ($('#hero').hasClass('hero-big')) {
            var heights = window.innerHeight;
            document.getElementById("hero").style.height = heights * 0.85 + "px";
        } else if ($('#hero').hasClass('hero-small')) {
            var heights = window.innerHeight;
            document.getElementById("hero").style.height = heights * 0.40 + "px";               
        } else  {           
            var heights = window.innerHeight;
            document.getElementById("hero").style.height = heights + "px";
        } 

    }

```

and a code responsible for the parallax effect

```
    function HeroParallax() {

    var page_title = $('body');
        var block_intro = page_title.find('#hero');
        if( block_intro.length > 0 ) var block_intro_top = block_intro.offset().top;    
    $( window ).scroll(function() {
        var current_top = $(document).scrollTop(); 
        var hero_height = $('#hero').height();
        if( $('#hero').hasClass('parallax-hero')){            
            block_intro.css('top', (current_top*0.5));          
        }
        if( $('#hero').hasClass('static-hero')){              
            block_intro.css('top', (current_top*1));            
        }
        if( $('#hero').hasClass('opacity-hero')){                
            block_intro.css('opacity', (1 - current_top/hero_height*1));
        }
    });

}

```

And here's a simple effect I found while google-ing

<http://jsfiddle.net/EWefL/>

This CSS effect is way too simple, and since I don't have JS/jQuery experience I'd love some help.

My questions are:
- How can I make that autoHeight thing?
- How can I increase top margin & decrease opacity of header while scrolling?

Thanks a lot, any kind of help would be much appreciated.