Menú como panel de YouTube

[[NiRVaNa]]

Hola gente del foro!

Vengo con una consulta entre manos. Si alguno esta familiarizado con el panel de "Mis videos" de Youtube, se dará cuenta que hay una menu que se encuentra en la estructura del sitio, y que a medida que se va haciendo scroll down, se ubica en la parte superior del sitio de manera estatica.

En un primer estado se ve así:
http://img847.imageshack.us/i/capturafw1.png/

y a medida que se desciende así:
http://img35.imageshack.us/i/capturafw2.png/

Alguién me podría guiar de qué manera lograr esto? Supongo que debe ser en combinación con Javascript y Css...

Salu2.

[laratik]

Creo que con solo CSS y la propiedad position:fixed; se puede lograr eso.

[[NiRVaNa]]

Si, eso sé como lograrlo. Justamente por eso no puse este thread en CSS.

A lo que voy es como hacer que en cierto "estado" el menú se encuentre embebido en el sitio, y que al descender se ubique en el top del sitio.

El ejemplo puede ver en "Mis videos" de la cuenta de uno en Youtube.

[laratik]

Rápidamente se me ocurre esto:

Código HTML:

<div id="target">CONTENIDO</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 

Código CSS:

#target {
    background: #00F;
    color:#FFF;
    text-align: center;
    width: 500px;
    left: 50%;
    margin-left: -250px;
    margin-top: 200px;
    position: absolute;
}
 

Código Javascript:

function fijar()
{
    variable = document.getElementById("target").offsetTop;
    window.onscroll = cambioScroll;
}
 
function cambioScroll(e)
{
    if(document.body.scrollTop >= variable) {
        document.getElementById("target").style.position = "fixed";
        document.getElementById("target").style.marginTop = "0px";
    } else {
        document.getElementById("target").style.position = "absolute";
        document.getElementById("target").style.marginTop = "200px";
    }
}
 

Claro que lo puedes mejorar, pero para dar una guia no creo que este mal.

[[NiRVaNa]]

Una pregunta...

La función fijar en que momento debería ser llamada?

[InKarC]

Solo una vez, preferiblemente cuando cargue el documento...

[[NiRVaNa]]

Muchisimas Gracias @laratik y @InKarC...

Funciona de maravilla! :D

[laratik]

Iniciado por InKarC

Solo una vez, preferiblemente cuando cargue el documento...

Se me había pasado colocar el body del html, gracias por contestar por mi.