Javascript getElementById中有多个ID

我发现了一个很好的教程，可以将导航与页面分离，从而在使用Javascript（）滚动时保持页面静态

然而，我想在不止一个导航分区上实现这一点

我假设它正在将另一个类名添加到

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

---

您必须为每个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>         

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

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

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

如果这还不能回答您的问题，请在您的问题中添加一些相关的HTML代码。

---

[更新：示例]

您必须为每个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>         

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

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

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

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

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

HTML:

测试1

测试2

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

divs=document.getElementsByClassName（'navigation'）；
对于（i=0；i104）{
divClassName.replace（'fixed'，''）；
}否则{
divClassName+=‘固定’；
}
}

我想这样就行了：-）

你好！ Gonzalo G.

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

HTML:

测试1

测试2

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

divs=document.getElementsByClassName（'navigation'）；
对于（i=0；i104）{
divClassName.replace（'fixed'，''）；
}否则{
divClassName+=‘固定’；
}
}

我想这样就行了：-）

你好！

---

Gonzalo G.

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

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

var nodes = document.getElementsByClassName('navigation')

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

如果使用jquery，则可以使用

.hasClass（'fixed'）

）

---

…您当前的问题是它无法将类名添加到导航中，因为其中有两个，而您没有指定要使用哪一个

---

如果您希望在两个导航div中发生这种情况，请考虑将它们都放到一个div中并调用它，并在其上设置样式（这取决于您的设计）

在同一个ID的页面上不应该有多个项，ID的含义是唯一的……如果您想捕获多个项，则应该使用：

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

var nodes = document.getElementsByClassName('navigation')

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

如果使用jquery，则可以使用

.hasClass（'fixed'）

）

---

…您当前的问题是它无法将类名添加到导航中，因为其中有两个，而您没有指定要使用哪一个

---

如果您希望在两个导航div中发生这种情况，请考虑将它们都放到一个div中并调用它，并在其上设置样式（这取决于您的设计）

元素上的所有ID必须是唯一的。 一个简单更改的解决方案是将CSS文件更改为如下内容：

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

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

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

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

并定义Div的vis：

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

/*通过确保导航始终处于打开状态来处理正在滚动的页面
*视图。
*/
函数handleScroll（）{
//检查这是一个相对现代的浏览器
if（window.XMLHttpRequest）{
divs=document.getElementsByClassName（'navigation'）；
对于（i=0；i104？'navigationFixed'：'navigation'）；
} 
}
}
//添加滚动事件侦听器
if（window.addEventListener）{
window.addEventListener（'scroll'，handleScroll，false）；
}否则{
窗户。附件（'onscroll'，handleScroll）；
}

元素上的所有id必须是唯一的

一个简单更改的解决方案是将CSS文件更改为如下内容：

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

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

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

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

并定义Div的vis：

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

/*通过确保导航始终处于打开状态来处理正在滚动的页面
*视图。
*/
函数handleScroll（）{
//检查这是一个相对现代的浏览器
if（window.XMLHttpRequest）{
divs=document.getElementsByClassName（'navigation'）；
对于（i=0；i104？'navigationFixed'：'navigation'）；
} 
}
}
//添加滚动事件侦听器
if（window.addEventListener）{
window.addEventListener（'scroll'，handleScroll，false）；
}否则{
窗户。附件（'onscroll'，handleScroll）；
}

一个页面上不应该有多个具有相同ID的项目，ID是唯一的…如果要捕获多个项目，应使用

document.getElementsByClassName（'navigation'）

（如果不使用jquery），它将获取导航栏，然后选中s