ID múltiple en getElementById

Encontré un excelente tutorial para separar una navegación de la página para mantenerla estática cuando se desplaza usando Javascript (http://code.stephenmorley.org/javascript/detachable-navigation/).

Sin embargo, me gustaría implementar esto en más de un div de navegación.

Supongo que está agregando otro nombre de clase a document.getElementById('navigation').className pero no puedo obtener la sintaxis correcta

Aquí está el código:

/* Handles the page being scrolled by ensuring the navigation is always in
 * view.*/   
function handleScroll(){

  // check that this is a relatively modern browser
if (window.XMLHttpRequest){

// determine the distance scrolled down the page
var offset = window.pageYOffset
           ? window.pageYOffset
           : document.documentElement.scrollTop;

// set the appropriate class on the navigation
document.getElementById('navigation').className =
    (offset > 104 ? 'fixed' : '');

  }

}

// add the scroll event listener
if (window.addEventListener){
  window.addEventListener('scroll', handleScroll, false);
}else{
  window.attachEvent('onscroll', handleScroll);
}

preguntado el 22 de mayo de 12 a las 21:05

no debe tener varios elementos en una página con la misma identificación, las identificaciones deben ser únicas... si desea capturar varios elementos, debe usar document.getElementsByClassName('navigation') (si no usa jquery) que obtendrá sus barras de navegación, luego verifique si ese nodo también está "arreglado" (un nodo puede tener más de una clase css, si usa jquery, puede usar .hasClass()) -

su problema actual es que no puede agregar className a la navegación porque hay dos de ellos y no está especificando cuál le gustaría usar. -

si desea que esto suceda en dos div de navegación, considere ponerlos en un div y llámelo nav y establezca un estilo en él (esto depende de su diseño) -

4 Respuestas

Tendrás que llamar getElementById() para cada identificación. El Método solo está diseñado para obtener exactamente un elemento (o cero, si no se encuentra la ID).

Suponiendo que tiene dos divisiones de navegación, izquierda y derecha, así:

<div id="navigationLeft">
     <ul>
         <!-- Navigation entries -->
     </ul>
</div>
<!-- Maybe some content or whatever? -->
<div id="navigationRight">
     <ul>
         <!-- Navigation entries -->
     </ul>
</div>         

Entonces su línea Javascript en cuestión se vería así:

// set the appropriate class on the navigation
document.getElementById('navigationLeft').className = (offset > 104 ? 'fixed' : '');
document.getElementById('navigationRight').className = (offset > 104 ? 'fixed' : '');

// or, shorter but less readable (i think) 
document.getElementById('navigationLeft').className
    = document.getElementById('navigationRight').className
        = (offset > 104 ? 'fixed' : '');

Si esto aún no responde a su pregunta, no dude en agregar algún código HTML relevante a su pregunta. [Actualización: Ejemplo]

contestado el 22 de mayo de 12 a las 21:05

Gracias por la respuesta. ¿Podrías darme un ejemplo? - Ryso

Esto no es recomendado debe reemplazar id con clases y usar eso en un bucle para establecer el valor:

HTML:

<div class="navigation">
  <p>test 1</p>
</div>
<div class="navigation">
  <p>test 2</p>
</div>

JavaScript:

divs = document.getElementsByClassName('navigation');
for(i = 0; i < divs.length; i++) {
    var div = divs[i];
    var divClassName = div.className;
    if(divClassName.indexOf('fixed') != -1 && offset > 104) {
       divClassName.replace(' fixed','');
    } else {
       divClassName += ' fixed';
    }
}

Creo que eso hará el truco :-)

¡Saludos! gonzalo g

contestado el 22 de mayo de 12 a las 21:05

Desafortunadamente, esto no funciona en IE 6 o 7, ya que aún no conocen getElementsByClassName(). - Lukx

Si usa algo más como mootools, jquery, prototipo o cualquier otra biblioteca, puede reemplazar la llamada de getElementsByClassName por otra cosa, mientras tanto, déjeme ver si puedo encontrar un reemplazo que pueda admitir IE6 y 7 PS: Aquí está una implementación de javascript pura que podría usar en esos navegadores: robertnyman.com/2008/05/27/… - ggarcia24

no debe tener varios elementos en una página con la misma identificación, las identificaciones deben ser únicas... si desea capturar varios elementos, debe usar:

<div class="navigation"></div>

var nodes = document.getElementsByClassName('navigation')

...si no usa jquery, de lo contrario, haga algo como

var nodes = $('.navigation')

que obtendrá sus barras de navegación, luego verifique si ese nodo también está "arreglado" (un nodo puede tener más de una clase css)

(nodes[i].indexOf("navigation") >= 0)

si usa jquery, puede usar .hasClass('fixed') )

nodes[i].hasClass('fixed')

... su problema actual es que no puede agregar className a la navegación porque hay dos de ellos y no está especificando cuál le gustaría usar.

Si desea que esto suceda en dos div de navegación, considere ponerlos en un div y llámelo nav y establezca un estilo en él (esto depende de su diseño)

contestado el 22 de mayo de 12 a las 21:05

Todos los id de un elemento deben ser únicos.

Una solución para que pueda hacer un cambio simple sería cambiar el archivo CSS a algo como esto:

.navigation{
  position:absolute;
  top:120px;
  left:0;
}

.navigationFixed{
  position:fixed;
  top:16px;
}

Y defina la Div's vis esto:

<div class="navigation">
  <!-- your navigation code -->
</div>

Y luego edite el JavaScript a algo similar a esto:

/* Handles the page being scrolled by ensuring the navigation is always in
 * view.
 */
function handleScroll(){

  // check that this is a relatively modern browser
  if (window.XMLHttpRequest){

  divs = document.getElementsByClassName('navigation');
  for(i = 0; i < divs.length; i++) {
    // determine the distance scrolled down the page
    var offset = window.pageYOffset
               ? window.pageYOffset
               : document.documentElement.scrollTop;
    divs[i].className =
        (offset > 104 ? 'navigationFixed' : 'navigation');

    } 

  }

}

// add the scroll event listener
if (window.addEventListener){
  window.addEventListener('scroll', handleScroll, false);
}else{
  window.attachEvent('onscroll', handleScroll);
}

contestado el 22 de mayo de 12 a las 21:05

Esta es la opción que preferiría si pudiera. Desafortunadamente, IE7 no conoce getElementsByClassName(). - Lukx

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.