Alinear verticalmente javascript (ventana navegador)
0Supongamos que queremos poner una capa fija, centrada en la ventana del navegador para mostrar algo.
En la siguiente imagen podemos ver la situación. La capa fija que queremos insertar es la verde:
En el siguiente código veremos la función necesaria para conseguir el efecto
- <script type="text/javascript">
- $(document).ready(function(){
- $("#social").css("position", "fixed");
- var altoNavegador = $(window).height()/2;
- var altoSocial = $("#social").height()/2;
- var topSocial = altoNavegador-altoSocial;
- $("#social").css("top",topSocial);
- $("#social").css("right",0);
- });
- </script>
Lo que estamos haciendo es cambiar el atributo position de la capa a mostrar centrada a fixed para que se mantenga siempre en la misma posición ignorando el scroll (posición fija).
Tras eso calculamos el valor de las variables altoNavegador y altoSocial, que son el alto en pixeles que muestra nuestro navegador y el alto total de la capa que queremos posicionar verticalmente. Si te fijas, lo estamos dividiendo por dos dado que nos interesa colocar la capa a la mitad del navegador, no en la parte de abajo.
Una vez que tenemos estas dos medidas divididas a la mitad, calculamos el topSocial, que sería el valor de la propiedad top que tenemos que asignar a nuestra capa para que se posicione centrada verticalmente.
Tras hacer estos cálculos lo último que hacemos es asignar las propiedades top y right (en caso de querer la capa a la derecha) para que la capa quede posicionada correctamente.
Si tienes alguna duda no dudes en dejar un comentario.