シンプルなヘッダーを持っていれば、以下のように定位置にスタイルが設定されています。どのように（バニラのJavaScriptで）私は200px（ヘッダーの高さ）をスクロールすると、スクロール時に色を変更できますか？私がstackoverflowで見つけることができるすべての例は、JQueryのみです。Vanilla Javascript。スクロールするときに要素のスタイルを変更します。
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>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>これは正しい方向にあなたを導く可能性があります
// 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>
'if（scrollTop === 200）'を試したことがありますか？ – PHPglue