Recibe ayuda de expertos
Es gratis y fácil
Respuestas, votos y comentarios
Recibe puntos, vota y da la solución
Hola,
Me gustaría que alguien me dijese como puedo hacer una barra de navegación fija como la de esta web http://www.brandwatch.com.
Como veis, en la web hay dos barras. La de arriba de todo, la negra, desaparece al hacer scroll. En cambio, la segunda barra queda fija pero con la salvedad de que el logo queda reducido. Es justamente ese efecto el que quiero conseguir.
Gracias
Hola jacobar,
Si no necestiás una barra que desaparezca al hacer scroll, ese efecto se consigue con CSS sin necesidad de programar nada.
El contenedor de la barra superior, un DIV por ejemplo, le ponés como propiedades CSS
position: fixed:
top: 0;además del alto y la demás decoración que quieras ponerle.
En la página de ejemplo, el logo no se reduce, sino que al scrollar solo queda visible la parte de abajo.
Podés cambiar el tamaño del logo con media-querys en CSS al cambiar el tamaño del navegador entre otras cosas.
Si lo que necesitás es que una barra desaparezca, esa página lo hace con JavaScript y la bilbioteca JQuery, pero ya implica meterse en cuestiones de programación o un manejo avanzado de Bootstrap.
Saludos!
Hola buenas tardes para poder realizar este efecto si se debe usar un poco de jQuery y CSS, el jQuery para detectar cuando la barra esté en top=0 y cambie su propiedad de position:relative; a position:fixed;
Si no sabes mucho de jQuery o te quieres ahorrar tiempo, te recomiendo que utilices el siguiente plugin https://github.com/leafo/sticky-kit. Es muy bueno y se configura muy rápido.
