2

jQueryではメソッドtoggleClassを使用できますがscrollTop、javascriptでこれを行う方法を理解しようとしています.

<header>ウィンドウをスクロールするとサイズが変更される固定メニューがあります。class="small"だから私はjavascriptの助けを借りてヘッダーに追加したい.

jQueryコードを理解しました：

$(document).on("scroll", function () {
    $("header").toggleClass("small", $(document).scrollTop() > 100);
});

しかし、私はこれをjavascriptで書きたいと思っています。以下は私がこれまでに試したことですが、行き詰まっています。

function toggleMenu() {
    var body = document.getElementsByTagName(body);
    if (body > 100) {
        document.getElementsByTagName('header').classList.toggle('small');
    }
}
4

2 に答える 2

2

次のコードは、ユーザーがスクロールしたかどうかを追跡し、ページの 100 ピクセル下にある場合は、すべての<header>タグにクラス small を追加します。

window.onscroll = function() {
  var el = document.getElementsByTagName('header');
  var className = 'small';
  for (var i=0; i<el.length; i++) {
    if (el[i].classList) {
      if (window.scrollY > 100)
          el[i].classList.add(className);
      else
          el[i].classList.remove(className);
    } else {
      // IE Fix
      if (window.scrollY > 100)
          el[i].className += className;
      else
          el[i].className = str.replace(new RegExp("\\b"+className+"\\b","gi"),"");
    }
  }
}

これがjsfiddleの例です

一方、<header>タグが 1 つしかない場合は、そのように id を追加して<header id='header'>、次のコードを実行できます。少し速くなりますが、正直なところ、どちらの方法でも気付かないでしょう.

window.onscroll = function() {
  var className = 'small';
  var el = document.getElementById('header');

  if (el.classList) {
    if (window.scrollY > 100)
      el.classList.add(className);
    else
      el.classList.remove(className);
  } else {
    // IE Fix
    if (window.scrollY > 100)
      el.className += className;
    else
      el.className = str.replace(new RegExp("\\b"+className+"\\b","gi"),"");
  }
}

これがjsfiddleの例です

于 2013-09-01T14:35:38.757 に答える
0

ブラウザの互換性について言及していないので、IE8+ であると仮定します

function handleScroll() {
    var header    = document.getElementsByTagName('header')[0],
    var scrollTop = window.pageYOffset
                    || document.documentElement.scrollTop
                    || document.body.scrollTop;

    if(scrollTop > 100) {
        if(header.classList) { // Modern browsers
            header.classList.add = 'small';
        }
        else { // IE8-
            header.className = 'blop small'; // Assuming your header already has a class 'blop'
        }
    }
    else {
       if(header.classList) { // Modern browsers
            header.classList.remove = 'small';
        }
        else { // IE8-
            header.className = 'blop'; // Assuming your header already has a class 'blop'
        }
    }
}

window.addEventListener('scroll', handleScroll, false); // Modern browsers
window.attachEvent('onscroll', handleScroll); // IE8-
window.onscroll = handleScroll; // If the other 2 are not available which is not likely to happen if you need to be compatible with IE8+

ページに複数のIDを含めることができ、選択が簡単になるため、ヘッダーにIDを追加することを検討することをお勧めします。

<header id="blop">[...]</header>

document.getElementById('blop');
于 2013-09-01T14:48:52.530 に答える