[SOLUCIONADO] Que el menú baje con el scroll.

[miguelA4]

Buenas, voy dando los últimos retoques a la web.

En la parte de arriba hay dos modulos con width 100%, uno con el mail y redes y el otro es el menú.
Lo que quiero hacer es que baje el menú con el scroll, es decir ponerlo en position"fixed", pero si pongo el menú en esa posición cuando baja el scroll si que baja pero queda el hueco del modulo de arriba. Me gustaria que al bajar se pegase arriba y al estar arriba del todo ya se baje para acoplarse con el de arriba.

Espero haberme explicado bien. Gracias

[AngelKrak]

puedes hacerlo con Jquery amigo ;) solo modificalo por lo que quieres ;)

Código Javascript:

$(window).scroll(function(){
        if (window.pageYOffset >= 95) {
    $('#div').css("position","fixed");
        }else{
    $('#div').css("position","static");
        }
    });
 

[miguelA4]

Lo que pasa que es que los dos modulos estan en diferentes archivos! esto donde lo tendria que poner, no he utilizado practicamente nada de jquery :D

EDITO: Ya lo he puesto pero falta que cuando baje se pegue arriba y no deje ese espacio de el otro modulo.

[miguelA4]

Edito en otro post. Ya he conseguido que se quede pegado arriba cuando bajo el scroll.

Código PHP:

  <script> 
    $(window).scroll(function(){ 
            if (window.pageYOffset >= 95) { 
        $('#menuse').css("position","fixed"); 
        $('#menuse').css("top","0"); 
            }else{ 
        $('#barrasa').css("position","static"); 
            } 
             
             
        });</script>  
  

Pero ahora cuando vuelvo arriba no aparece el modulo superior

[AngelKrak]

amigo, lo que este dentro de }else{ son los valores por defecto.

Código Javascript:

$(window).scroll(function(){ 
            if (window.pageYOffset >= 95) { //Cuando baje 95px el menu tomara position fixed y top 0
        $('#menuse').css("position","fixed"); 
        $('#menuse').css("top","0"); 
            }else{ //En caso contrario, Cuando suba tiene que tomar los valores que tenia por defecto...
        $('#barrasa').css("position","static");  //este codigo esta mal, ya que tiene que tomar las mismas propiedades que arriba pero no los mismos estilos.
         $('#menuse').css("position","relative"); //Seria algo asi mas o menos
        $('#menuse').css("top","0"); 
            } 
        });
 

[miguelA4]

Iniciado por AngelKrak

amigo, lo que este dentro de }else{ son los valores por defecto.

Código Javascript:

$(window).scroll(function(){ 
            if (window.pageYOffset >= 95) { //Cuando baje 95px el menu tomara position fixed y top 0
        $('#menuse').css("position","fixed"); 
        $('#menuse').css("top","0"); 
            }else{ //En caso contrario, Cuando suba tiene que tomar los valores que tenia por defecto...
        $('#barrasa').css("position","static");  //este codigo esta mal, ya que tiene que tomar las mismas propiedades que arriba pero no los mismos estilos.
         $('#menuse').css("position","relative"); //Seria algo asi mas o menos
        $('#menuse').css("top","0"); 
            } 
        });
 

Muchas gracias, ya esta totalmente funcionando como queria, doy el tema como solucionado. GRACIAS

[pzin]

Es un poco cochino ese código.

Con jQuery se puede añadir varias propiedades de una vez, sin tener que volver a seleccionar un elemento:

Código Javascript:

$().css({
  attributo: 'valor',
  atributto: 20
})
 

De todas formas, yo igual preferiría añadirle una clase en lugar de meter CSS por JavaScript cuando no es explícitamente necesario. Así, usar addClass() y removeClass() me parece más correcto.

De paso moveré esto al foro que es…