スクロール量に応じて、cssを切り替えたい

Question

スクロールして一定のところで、cssを切り替えたいのでドキュメント等を見つつ、javascriptを書いてみたところうまくいかなかったので
投稿させていただきます。
jQueryをできる限り使わずに、やりたいと思っています。なのでJQueryを使わない方法でお願いします

１回目はリロード時のみスクロールされている位置によってcssが適用されました。

let yoffset = window.pageYOffset;

if (yoffset > 280) {
    var element = document.getElementById("header");
    element.classList.add("headerblackbg")
}

２回は１回目を考慮し、書いてみたのですが、こちらはcssが切り替えられませんでした。

let yoffset = document.getElementById('header');
window.addEventListener('scroll', myfunction);

function myfunction() {
    if (yoffset > 280){
        yoffset.classList.add("headerblackbg");
    }else{
        yoffset.classList.remove("headerblackbg");
    }
}

どうがお願いします。

Answer 1

<style>
progress{position:fixed;top:0;right:0;}
.dummy{height:1000;}
.dummy.headerblackbg{background-Color:black;}
</style>
<script>

window.addEventListener('scroll',()=>{
  var h1=pageYOffset;
  var h2=innerHeight;
  var h3=document.documentElement.offsetHeight;
  var v=parseInt(h1/(h3-h2)*100);
  document.querySelector('progress').value=v;
  document.querySelector('.dummy').classList.toggle("headerblackbg",h1>200);
});
</script>
<progress value="0" max="100"></progress>
<div class="dummy"></div>

Comments

[Azulily]

回答ありがとうございます。
無事実装できました。
javascriptの勉強続けます。