[SOLUCIONADO] Cabecera con menu fija en pantalla al hacer scroll

[MindPaniC]

Hola,

lo que quiero hacer se usa mucho ultimamente en infinidad de webs, básicamente quiero que al hacer scroll hacia abajo la cabecera que incorpora un menu horizontal se mantenga en pantalla mientras me desplazo hacia abajo.

Este es el CSS de la cabecera:

Código CSS:

#cabecera {
    width:100%;
    height:90px;
    background-color:#000000;
}
#contenido-cabecera {
    margin:0 auto;
    padding:35px 0 55px;
    width:960px;
}
#logo {
    float:left;
    width:150px;
    color:#fff;
    margin:0;
}
/* MENU */
nav {
    margin:0;
    float:right;
    text-align:center;
    width:810px;
}
nav ul{
    float:right;
    list-style:none;
    margin:0;
    padding:0;
}
nav ul li{
    display:inline;
    text-transform:uppercase;
    font-size:15px;
    font-weight:bold;
    text-align:center;
    margin-left:65px;
}
nav ul li a{
    color:#fe9b00;
    text-decoration:none;
}
nav ul li a:hover {
    color:#E2E2E2;
}
nav .activo a {
    color:#fff;
}
 

Este es el script jquery:

Código Javascript:

<script>
$(function() {
 
    // grab the initial top offset of the navigation
    var sticky_navigation_offset_top = $('#cabecera').offset().top;
     
    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top
         
        // if we've scrolled more than the navigation, change its position to fixed to stick to top,
        // otherwise change it back to relative
        if (scroll_top > sticky_navigation_offset_top) {
            $('#cabecera').css({ 'position': 'fixed', 'top':0, 'left':0 });
        } else {
            $('#cabecera').css({ 'position': 'relative' });
        }  
    };
     
    // run our function on load
    sticky_navigation();
     
    // and run it again every time you scroll
    $(window).scroll(function() {
         sticky_navigation();
    });
 
});
</script>
 

Pues nada que no ocurre nada se mantiene al cabecera en su sitio. ¿cómo puedo hacerlo?

Saludos.

[MindPaniC]

Al final lo solucione simplemente con CSS, no os preocupeis,

Gracias

[gebremswar]

Hola MindPaniC, que tal.

No estaba demás mencionar que tu solución con CSS fue utilizar la propiedad

Código CSS:

position: fixed
 

.

Recuerda que no colocar la solución, de haber sido hallada, convierte el tema abierto en algo inservible y sin valor para el foro.