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

以下代码将跟踪用户是否滚动，如果他们在页面下方 100px，则将类 small 添加到所有<header>标签。

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>标签，你可以像这样添加一个 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，因为您的页面中可以有多个，更易于选择：

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

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