Hacer que el menú se quede arriba al llegar a un tope

[IMAC/]

Hola,

Supongo que ya sabréis a lo que me refiero y si no me confundo esto se tiene que hacer con javascript.

En páginas como series.ly y en algunas otras, el menú está en la parte superior de la página (aunque no arriba del todo) y cuando haces scroll para bajar la página se mueve con normalidad hasta que choca con el tope de la página.
Es entonces cuando se queda arriba como si fuera un div absoluto, pegado al tope de la página.

¿Sabéis como podria hacer eso?
Algún link, tutorial o algo?

Un saludo y gracias.

[zelgaki]

en realidad eso se hase con css agregandole al elemento

Código CSS:

position: fixed
 

[IMAC/]

No, no me has entendido bien.
No está arriba constantemente, sino solamente cuando va a desaparecer de la pantalla por el el scroll.

Ya lo he conseguido hacer y es algo así:

Código Javascript:

<script type="text/javascript">
 
var showStaticMenuBar = false;
 
$(window).scroll(function() {
    if(showStaticMenuBar == false){
        if($(window).scrollTop() >= 75){
            document.getElementById("staticHeader").style.display = "block";
            document.getElementById("headerMenu").style.display = "none";
            showStaticMenuBar=true;
        }
    }else{
        if($(window).scrollTop() <= 75){
            
            document.getElementById("staticHeader").style.display = "none";
            document.getElementById("headerMenu").style.display = "block";
            showStaticMenuBar=false;
        }   
    }
}
 
);
</script>
 

Donde el "headerMenu" es el menú normal y el "staticHeader" es el menú estático que está ahí pero sólamente se hace visible cuando llega el tope de la página.

Un saludo.

[Karlomagnum]

Iniciado por IMAC/

No, no me has entendido bien.
No está arriba constantemente, sino solamente cuando va a desaparecer de la pantalla por el el scroll.

Ya lo he conseguido hacer y es algo así:

Código Javascript:

<script type="text/javascript">
 
var showStaticMenuBar = false;
 
$(window).scroll(function() {
    if(showStaticMenuBar == false){
        if($(window).scrollTop() >= 75){
            document.getElementById("staticHeader").style.display = "block";
            document.getElementById("headerMenu").style.display = "none";
            showStaticMenuBar=true;
        }
    }else{
        if($(window).scrollTop() <= 75){
            
            document.getElementById("staticHeader").style.display = "none";
            document.getElementById("headerMenu").style.display = "block";
            showStaticMenuBar=false;
        }   
    }
}
 
);
</script>
 

Donde el "headerMenu" es el menú normal y el "staticHeader" es el menú estático que está ahí pero sólamente se hace visible cuando llega el tope de la página.

Un saludo.

Hola IMAC queria preuntarte como hago para tener este efecto en la barra menu de mi Blog ----> http://anatomiamaxima.blogspot.com

La verdad podría parecerte sencillo, pero es que soy newfull user en estos temas que me gustan mucho.

Vale, muchas gracias de antemano.

[IMAC/]

En el fondo se trata de 2 menús.
Uno estático en la parte superior de la página y oculto que posteriormente se activará con javascript pasado ciertos pixels con el scroll.

Y otro que estará en la parte de arriba de forma normal y que desaparecerá cuando se baje el scroll.

Esto da la sensación de que es uno solo pero en el fondo son 2, uno desaparece y otro aparece.

En el código que puse uno tiene el id staticHeader y otro el id headerMenu.

Con css haces que el estático esté fijado en la parte superior de la página y con style.display = "none"

El normal, el headerMenu con el estilo que tengas ahora.

No puedo explicarte mucho más porque dependerá de cómo tengas el menú en tu página y de los estilos que se le estén aplicando.

Un saludo y suerte.

[MagoMarlon]

Eso no es para nada robusto, porque fijate y si ese menú es un div, por ejemplo un div que contiene un carrito de compras?,, que maneja datos de una base de datos y se modifica dependiendo de lo que el usuario decida seleccionar?,, no puedo simplemente usar otro menu,, porque tendría que pasar esas variables que estan en el menu uno al menu 2,,, esto no es una buena solución.