como puedo lograr cierto efecto?

[rikimm]

Tengo en mente hacer esto tengo mi header y un nav que es mi menu, cuando yo voy bajando en la web quiero que el header y nav se tranforme el header cambien de tamaño y el nav se ajuste al header y valla bajando al mismo tiempo que baje a ver los demás contenidos.
Ese efecto lo he visto en varias web pero no tengo idea de como hacerle y no se si es con css o jquery

dejo como referencia esta web donde el menu que esta en negro baje pero yo quiero que ese menu aparte de bajar al mismo timepo tambien se haga mas ancho y mas largo refrencia

[YYs86]

Eso se realiza con JQUERY y el efecto es bastante sencillo.
Este es un ejemplo:

El javascript

Código Javascript:

$(window).scroll(function() {           
    if($(this).scrollTop() >= 120){
    
            $("#menu-hidden").show();
            $("#menu-back").hide();
            
    }else{              
            $("#menu-hidden").hide();
            $("#menu-back").show();
    }
    
});
 

El css

Código CSS:

#menu-hidden{
 
    min-height: 30px;
    display: none;
    position: fixed;
    top: 0px;
    width: 100%;
    background: url('../img/b_bg_alpha1.png') repeat #f1f1f1;
    z-index: 100000;
    
}
 

El ejemplo donde lo tengo utilizado -> [URL="http://www.guiahosteleria.com"]http://www.guiahosteleria.com[/URL]

[IsaBelM]

ya se que se menciona jquery, pero para futuras lecturas. aquí esta hecho con javascript

[rikimm]

Gracias IsaBeIM por tu surgerencia no importa que no sea en jquery tembien me sirve para saber como funciona en js

YYs86 por lo que enteiendo en el codigo debo de tener dos barras de menu osea dos nav por asi decirlo uno que es fijo y el otro es el que se va a mover junto con el scroll

en la parte de la condicion de " >=120" representa el numero de pixeles de la pantalla

[YYs86]

Eso es, las dos cosas son como dices...

Tienes un menu visible y otro oculto que es el que se pega al tu parte de arriba del navegador.

Y la condición donde compara con 120 son los px desde la parte superior del navegador.

Un saludo

[rikimm]

tengo una pequeña duda no me corre el archivo js mas bn no hace la condicion segun yo debe de estar asi

Código Javascript:

$(document).ready(
 function()
        {
        $(window).scroll(function() {           
         if($(this).scrollTop() >= 120){
    
             $("#menu-hidden").show();
                $("#menu-back").hide();
            
         }else{              
             $("#menu-hidden").hide();
             $("#menu-back").show();
            }
    
        }); 
        
        }
    );
 

ya tambien lo puse afuera del $(document).ready y no funciona el codigo donde estoy mal

[YYs86]

Has metido la librería de jquery antes de hacer ese script?

Inserta esto:

Código Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 

Y luego tu script tal y como lo pones ahí.

[rikimm]

si tiene la libreria si lo coloco directamente el codigo en el html si me funcion pero en el archivo js no funcion no se porque

[YYs86]

La ruta del archivo js la pones correctamente?
Trata de poner la ruta absoluta de tu js al incluilo en tu web.

[rikimm]

Ya lo logre coloque mal los archivos primero puse mi archivo js y luego la libreria jquet cuando deve ser al reves