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

Question

如果我有一个简单的标题，在固定位置设置样式，如下所示。 我如何（在 vanilla JavaScript 中）在滚动时更改颜色，比如当你向下滚动 200px（标题的高度）时。 我可以在 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>

Answer 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>

Answer 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>

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-01-10 10:06:29

解决方案2
1 2017-01-10 10:30:24

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-01-10 10:06:29

解决方案2 1 2017-01-10 10:30:24

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

解决方案1
1 已采纳 2017-01-10 10:06:29

解决方案2
1 2017-01-10 10:30:24