problema con funcion jquery

[cslbcn]

Hola.

Encontré esta funcion por internet que hace que un elemento div que tiene un margen superior de 300px (por ejemplo) se mueva a la vez del scroll, pero que cuando se baja la pagina se queda fijo en el top:0px;

Código Javascript:

$(function() {
                var offset = $("#toldo").offset();
                var topPadding = 0;
                $(window).scroll(function() {
                    if ($(window).scrollTop() > offset.top) {
                        $("#toldo").stop().animate({
                            marginTop: $(window).scrollTop() - offset.top + topPadding                          
                        });
                    } else {
                        $("#toldo").stop().animate({
                            marginTop: 0
                        });
                    };
                });
            });
 

Código HTML:

<div id="toldo" class="header"></div>
 

Código CSS:

.header{
    width:100%;
    height:74px;
    background-image:url(../img/toldoBack.png);
    position:absolute;
    
}
 

Funciona bien, pero el efecto de desplazamiento lo quiero eliminar. El problema es que no consigo hacerlo. Ejemplo: http://www.martiniglesias.eu/demos/barralateral.html

[ocesitaro]

yo lo haria solo con css , sin usar jquery;

.header{
width:100%;
height:74px;
background-image:url(../img/toldoBack.png);
position:fixed;


}

[cslbcn]

Fixed no puede ser siempre, porque inicialmente tiene que estar a una distancia de 800px del top y despues, cuando se baje el scroll debe quedarse en top:0