Multiple Id In Getelementbyid

I've found a great tutorial to detach a navigation from the page to keep it static when you scroll using Javascript (http://code.stephenmorley.org/javascript/detachable-navigation/

Solution 1:

You will have to call getElementById() for each ID. The Method is only designed to get exactly one element (or zero, if the ID isn't found).

Assuming, you have two navigation divs, left and right, like this:

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

Then your Javascript line in question would look like this:

// 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' : '');

If this does not yet answer your question, please feel free to add some relevant HTML-Code to your question. [Update: Example]

Solution 2:

This is not recommended you should replace id with classes and use that in a loop to set the value:

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';
    }
}

I think that will do the trick :-)

Greetings! Gonzalo G.

Solution 3:

you shouldnt have multiple items on a page with the same ID, ID's are meant to be unique...if you want to capture multiple items you should use:

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

var nodes = document.getElementsByClassName('navigation')

...if not using jquery, otherwise do something like

var nodes = $('.navigation')

which will get you yor nav bars, then check to see if that node is also "fixed" ( a node can have more than one css class )

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

if using jquery, you can use .hasClass('fixed') )

nodes[i].hasClass('fixed')

...your current problem is that it cant add className to navigation because there are two of them and youre not specifying which one you'd like to use.

If you want this to happen in two navigation div's, consider putting them both into one div and call it nav and set a style on it (this depends on your design)

Solution 4:

All id's on an element must be unique.

One solution so that you can do a simple change would be to change the CSS file to something like this:

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

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

And define the Div's vis this:

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

And then edit the JavaScript to something along the lines of this:

/* 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);
}