getElementById中的多个ID

Question

我发现了一个很棒的教程，可以从页面上分离导航，以在您使用Javascript（ http://code.stephenmorley.org/javascript/detachable-navigation/ ）滚动时使其保持静态。

但是，我想在多个nav div上实现此功能。

我假设它正在给document.getElementById('navigation').className添加另一个类名，但是我无法获得正确的语法

这是代码：

/* 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

您将必须为每个ID调用getElementById() 。 该方法仅设计为仅获取一个元素（如果找不到ID，则为零）。

假设您有左右两个导航div，如下所示：

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

然后，您所关注的Javascript行如下所示：

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

如果这还不能回答您的问题，请随时为您的问题添加一些相关的HTML代码。 [更新：示例]

Answer 2

不建议您使用类替换id并在循环中使用它来设置值：

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

我认为这可以解决问题:-)

问候！ 贡萨洛G.

Answer 3

您在页面上不应有多个具有相同ID的项目，ID是唯一的...如果要捕获多个项目，则应使用：

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

var nodes = document.getElementsByClassName('navigation')

...如果不使用jquery，则执行类似的操作

var nodes = $('.navigation')

这将使您获得导航栏，然后检查该节点是否也被“固定”（一个节点可以具有多个css类）

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

如果使用jQuery，则可以使用.hasClass('fixed') ）

nodes[i].hasClass('fixed')

...您当前的问题是它无法将className添加到导航中，因为其中有两个，并且您未指定要使用哪个名称。

如果要在两个导航div中进行此操作，请考虑将它们都放在一个div中，并命名为nav并在其上设置样式（这取决于您的设计）

Answer 4

元素上的所有ID必须唯一。

使您可以进行简单更改的一种解决方案是将CSS文件更改为如下所示：

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

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

并定义Div对此：

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

然后按照以下方式将JavaScript编辑为：

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