HTML - Barra de navegación web dinámica

   
Vista:

Barra de navegación web dinámica

Publicado por Kevin (2 intervenciones) el 28/01/2014 18:15:22
Hola comunidad,

Me interesaría una barra de navegación, a ser posible editable para ajustarla a mi página web, por ejemplo los colores. La barra de navegacion que busco es una dinámica, la quiero poner en la parte superior de un foro, en el momento que yo baje un poco en el foro, la barra me gustaría que siguera visible en la parte superior.

Un saludo!

Gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Barra de navegación web dinámica

Publicado por xve (1178 intervenciones) el 28/01/2014 19:49:36
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Barra de navegación web dinámica

Publicado por Kevin (2 intervenciones) el 28/01/2014 22:49:59
Sí, es perfecto. Muchas gracias, me va a costar encajarlo en la web, lo intento encajar en el index.php de mi web pero queda bastante mal ¿Crees que haya solución para encajarlo en la parte superior?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

Barra de navegación web dinámica

Publicado por Jose maria (12 intervenciones) el 28/01/2014 23:01:35
jQuery lo usamos hasta en la sopa (con permiso de Mafalda: pufff )
Siempre he dicho que no quiero caer en la jQuerydependencia por un solo dato. Si este es tu caso:

En javascript puro puedes hacerlo con un código muy simple:

En HTML
1
2
3
4
<ul id="menu">
  <li><a href="#">Portada</a></li>
  <!-- y todo tu menú -->
</ul>

En javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function scrollMenu(event) {
  var y = window.scrollY;
  var menu = document.getElementById('menu');
  if (typeof menu.originalY == "undefined") {
    menu.originalY = menu.offsetTop
  }
  if (y > menu.originalY) {
    menu.style.top = '0px';
    menu.style.position = 'fixed'
  } else {
    menu.style.top = '';
    menu.style.position = 'relative'
  }
}
window.onscroll = scrollMenu;

Como puedes ver, es un juego de la posición del id en la ventana y posicionarlo en relative o fixed según esté en cabecera o arrastres la página..
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve

Barra de navegación web dinámica

Publicado por xve (1178 intervenciones) el 29/01/2014 07:51:34
Muy bueno Jose!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Barra de navegación web dinámica

Publicado por Kevin (1 intervención) el 29/01/2014 16:40:20
Yo ya me estoy liando con tanta línea de código jaja.

Mira, os paso las páginas que me daron a conocer la barra flotante:

http://www.egame-tournament.com/foro/
http://downtown-rp.es/foro/index.php

No estoy muy seguro pero está como incorporado en el index.php (viendo los códigos de fuente)

Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Barra de navegación web dinámica

Publicado por Jose (1 intervención) el 03/02/2016 09:08:15
Disculpa muy buen codigo pero no entiendo el primer if ni que devuelve elemento.originalY,¿me podria resolver la duda? Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar