香草Javascript。滚动时更改元素的样式。答案

【问题标题】：Vanilla Javascript. Change style of element when scrolling.香草Javascript。滚动时更改元素的样式。
【发布时间】：2017-05-24 18:41:39
【问题描述】：

如果我有一个简单的标题，样式固定在固定位置，如下所示。我如何（在香草 JavaScript 中）在滚动时更改颜色，例如当您向下滚动 200 像素（标题的高度）时。我可以在 stackoverflow 上找到的所有示例仅适用于 JQuery。

body {
  height: 2000px;
}

 header {
   width: 100%;
   height: 200px;
   background-color: red;
   position: fixed;
 }

<body>

    <header>
      <h1>This is the header I want to change</h1>
    </header>

 </body>

【问题讨论】：

你试过if(scrollTop === 200)吗？

标签： javascript scroll offset

【解决方案1】：

function runOnScroll() {
    if (document.body.scrollTop >= 200) {
     var h1 = document.getElementsByTagName("h1")[0];
      h1.style.color = "green";
      }
 }; 
window.addEventListener("scroll", runOnScroll);

body {
  height: 2000px;
}

 header {
   width: 100%;
   height: 200px;
   background-color: red;
   position: fixed;
 }

<body>

    <header>
      <h1>This is the header I want to change</h1>
    </header>

 </body>

【讨论】：

【解决方案2】：

这可能会引导你走向正确的方向：

// external.js
var doc, bod, htm;
addEventListener('load', function(){
  doc = document; bod = doc.body; htm = doc.documentElement;
  addEventListener('scroll', function(){
    doc.querySelector('header').style.backgroundColor = htm.scrollTop > 199 ? 'blue' : 'red';
  });
});

/* external.css */
body{
  height: 2000px;
}
header{
  width: 100%;
  height: 200px;
  background-color: red;
  position: fixed;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <header>
    <h1>This is the header I want to change</h1>
  </header>
</body>
</html>

【讨论】：