0

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

但是，我想在多个导航 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);
}
4

4 回答 4

3

您必须getElementById()为每个 ID 打电话。该方法仅旨在获取一个元素（或零，如果未找到 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 代码。[更新：示例]

于 2012-05-22T20:21:57.247 回答
0

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

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。

于 2012-05-22T20:31:06.357 回答
0

你不应该在一个页面上有多个具有相同 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 并在其上设置样式（这取决于您的设计）

于 2012-05-22T20:31:30.960 回答
0

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

一种可以进行简单更改的解决方案是将 CSS 文件更改为以下内容：

.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);
}
于 2012-05-22T20:36:10.110 回答