Top fixed bar

Parece que hoy día están de moda las barras superiores. En su tiempo fueron las inferiores pero ya muchos de los grandes están dejando una barra superior en ocasiones fija (fixed). Algunos de los ejemplos los puedes ver en:

Y muchas más, que seguro verás todos los días. ¿Por qué se usa ahora arriba? Aparte de que molesta menos, es una buena forma de tener siempre a mano todo lo que necesites para navegar dentro de una web. En ocasiones la he usado en varios de mis proyectos o incluso en alguna que otra página. La razón, porque era la mejor forma de organizar el contenido y tener más espacio libre, sin necesidad de un sidebar o un menú horizontal estático que se perdía en cuanto el usuario bajaba el scroll un poco.

Por ejemplo, en twotwitter.com la uso similar a twitter, en este caso para algunos enlaces tal que inicio, perfil, opciones, o logout.

 

Pero en el caso de misreflexiones.net creo que es más interesante dar un acceso a las publicaciones del mes, y por eso tengo un calendario que acompaña al hacer scroll.

 

En este caso lo que hago es, hacerla algo transparente para que no moleste mucho al lector ahí arriba. Y al pasar el ratón por encima la vuelvo opaca para mejorar la visualización.

Aunque antes de poner una barra superior pregúntate  si va a ser más útil que molesta para el usuario, antes de ponerla, para seguir un poco la moda.

De todos modos a continuación voy a darte unas pequeñas directrices para crear tu barra superior de forma fácil, que se quede fija siempre en la parte superior, y una parte opcional es, hacerla translúcida al bajar el scroll y ocapa al pasar el ratón por encima. Vamos a ello.

Aquí tenemos el archivo HTML con el código javascript top-bar-fixed.html

Al que acompañamos la siguiente hoja de estilo css.css

Con esto tendrás una barra superior oscura, con sombrita y que se vuelve translúcida al bajar la página, aparte si pasas el ratón por encima se vuelve opaca.

[box type=”download”]

Si quieres descargarte los archivos de este pequeño post.

Clica aquí y podrás bajarte un ejemplo funcional.


[/box]

Espero que os haya gustado (;

14 Comments

  • marcelo 19 junio, 2012 Reply

    muchas gracias! funcionó muy bien. Excelente la página, veré otras entradas para seguir aprendiendo. Saludos desde Chile! =)

  • Nuc134rB0t 24 agosto, 2012 Reply

    Gracias.

  • Exequiel 23 octubre, 2012 Reply

    GRACIAS Te recomendare a todos los que no entienden sobre esto!!!! 🙂 :)…

  • luis 5 noviembre, 2012 Reply

    Un detalle, que al hacer scroll horizontal se tapa la ultima opción.

  • Marcos 13 noviembre, 2012 Reply

    Me ha gustado mucho… pero en IE9 no funciona…
    🙁
    Estoy loco buscando cómo hacer funcionar algo así en IE9… creo que la forma más rápida es usar algún plug-in de JQuery, pero no sé cuál. Alguien sabe cuál?
    Gracias!

  • Marcelo 24 noviembre, 2012 Reply

    Existe la posibilidad de hacer que la barra no refresque o sea que sea estatica y su contenido no refresque al acceder a otra pagina del sitio.

    • Marcos 25 noviembre, 2012 Reply

      Hola, Marcelo, creo que lo tuyo es una pregunta y yo diría que no, a no ser que uses técnicas de refresco parcial de tu página, por ejemplo:
      1.- meter el contenido de esa barra en un frame aparte de lo demás (feo, pero práctico)
      2.- meter el resto del contenido en un div o algo similar y refrescar ese contenido (a modo de viewport) mediante ajax (por ejemplo): el resultado es muy bueno, pero tienes que currarte cada llamada con cuidado, claro…
      De otra manera diría (a lo mejor te miento…) que no se puede…
      Espero haberte ayudado… a ver si alguien me ayuda a mí con el IE9…
      🙁
      Saludos!

    • IguannaWeb 25 noviembre, 2012 Reply

      Marcelo y Marcos Marcelo, lo que te comenta marcos tiene razón, es algo así como hace facebook para mantener el chat a la derecha y el menú en la parte superior… iframe es algo antiguo y feo, pero ajax sería como dice Marcos, algo más complejo. Aunque no tan complicado como parece, jquery te facilita mucho la labor.

      Respecto a lo que Marcos necesita, que funcione en IE9, pues si quieres le echo un vistázo al código para que funcione. Como siempre será cuestión de hacks. Aunque hay pequeños javascripts, que sirven para arreglar estas cosas que IE realmente hace mal.

      • Marcos 26 noviembre, 2012 Reply

        Ey! Muchas gracias por contestar! Si me miras eso me harías un gran favor, aunque, como tú has dicho, he encontrado por ahí un jquery bastante útil que lo consigue, pero me gusta mucho esta forma de hacerlo, si hay algún hack para conseguir el mismo resultado (o muy parecido) en IE9… sería genial!
        GRACIAS!

  • david 9 diciembre, 2012 Reply

    Buenas,

    La primera parte del codigo donde la inserto?:

    Top bar fixed

    jQuery(function() {
    /*Función scroll*/
    jQuery(window).scroll(function(){
    var scrollTop = jQuery(window).scrollTop();
    if(scrollTop != 0){
    jQuery(‘#top-bar-bg’).stop().animate({‘opacity’:’0.2′},400);
    }else{
    jQuery(‘#top-bar-bg’).stop().animate({‘opacity’:’1′},400);
    }
    });
    /*Función opacidad al pasar ratón por encima*/
    jQuery(‘#top-bar-bg’).hover(
    function (e) {
    var scrollTop = jQuery(window).scrollTop();
    if(scrollTop != 0){
    jQuery(‘#top-bar-bg’).stop().animate({‘opacity’:’1′},400);
    }
    },
    function (e) {
    var scrollTop = jQuery(window).scrollTop();
    if(scrollTop != 0){
    jQuery(‘#top-bar-bg’).stop().animate({‘opacity’:’0.2′},400);
    }
    }
    );
    });

    Texto
    Cuerpo de la web

    No se donde colocarla.

    gracias por vuestra ayuda

  • Marcelo 28 enero, 2013 Reply

    Pudieron arreglarla para IE9?

  • Violetazulado 15 marzo, 2013 Reply

    lo tendrias que colocar en una etiqueta , en el dentro del header.

    jQuery(function() {
    /*Función scroll*/
    jQuery(window).scroll(function(){
    var scrollTop = jQuery(window).scrollTop();
    if(scrollTop != 0){
    jQuery(‘#top-bar-bg’).stop().animate({‘opacity’:’0.2′},400);
    }else{
    jQuery(‘#top-bar-bg’).stop().animate({‘opacity’:’1′},400);
    }
    });
    /*Función opacidad al pasar ratón por encima*/
    jQuery(‘#top-bar-bg’).hover(
    function (e) {
    var scrollTop = jQuery(window).scrollTop();
    if(scrollTop != 0){
    jQuery(‘#top-bar-bg’).stop().animate({‘opacity’:’1′},400);
    }
    },
    function (e) {
    var scrollTop = jQuery(window).scrollTop();
    if(scrollTop != 0){
    jQuery(‘#top-bar-bg’).stop().animate({‘opacity’:’0.2′},400);
    }
    }
    );
    });

  • Pingback: Anónimo

  • Leo 7 abril, 2014 Reply

    Hola!Me resultó muy útil la entrada.

    Quería preguntar cómo hacer para que Chrome no me muestre el borde inferior, Firefox no lo hace.

    Muchas gracias!!

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.