0

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

4 に答える 4

3

getElementById()IDごとに電話する必要があります。このメソッドは、正確に 1 つの要素 (ID が見つからない場合はゼロ) を取得するように設計されています。

次のように、左右に 2 つのナビゲーション 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をクラスに置き換え、それをループで使用して値を設定することはお勧めしません。

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 が 2 つあり、どちらを使用するかを指定していないため、ナビゲーションに追加できないことです。

これを 2 つのナビゲーション div で実現したい場合は、両方を 1 つの div に入れ、それを nav と呼び、それにスタイルを設定することを検討してください (これはデザインによって異なります)。

于 2012-05-22T20:31:30.960 に答える
0

要素のすべての ID は一意でなければなりません。

簡単な変更を行うための 1 つの解決策は、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 に答える