Question

我找到了一个很好的教程,在使用 Javascript (http://code.stephenmorley.org/javascript/detachable-navigation/ ) 滚动时,从页面中拆卸导航使其保持静态。

然而,我希望在不止一个导航上执行这一计划。

我想它是在 document 中添加另一个类名。 getElementById( 导航). 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 调用 < code> getEplementById () 。方法的设计只能获得一个元素( 或零, 如果找不到 ID ) 。

假设你有两个导航分机, 左右,像这样:

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

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

Answer 2

这不是 commend 推荐的 , 您应该用类替换 ID, 并在循环中使用它来设定值 :

HTML :

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

标注描述 :

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

我认为这样就能解决问题了:-)

Greetings! Gonzalo G.

Answer 3

您不应该在带有同一 ID 的页面上拥有多个项目, ID s 应该是独一无二的... 如果您想要捕捉您应该使用的多个项目 :

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

var nodes = document.getElementsByClassName( navigation )

...如果不使用jquery, 否则做类似的东西

var nodes = $( .navigation )

这将为您获取 yor nav 列, 然后检查该节点是否也是“ 固定的 ” (一个节点可以有一个以上的 cs 类) 。

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

如果使用 jquery, 您可以使用 .hasClass (固定) )

nodes[i].hasClass( fixed )

...你目前的问题是,它不能在导航中添加类名, 因为有两个类名, 而您没有指定您喜欢使用哪个类名。

如果您想要在两个导航 div s 中发生这种情况, 请考虑将两者放在一个 div 中, 并称之为 nav 并设置一个样式( 这取决于您的设计 )

Answer 4

元素上的所有 ID 必须是独特的。

一种可以做简单改变的解决方案就是将 CSS 文件更改为类似文件 :

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

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

并给Divs下定义:

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

友情链接