Question

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/).

However, I’d like to implement this on more than one nav div.

I assume it’s adding another class name to document.getElementById('navigation').className but I can’t get the right syntax

Here is the code:

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

Answer 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]