在Scroll上更新CSS代码：简化，使其不会'；不要使用JQuery和最简单的Javascript

我有这段代码（见下文）——我对Javascript很糟糕，我希望有人能在不使用jquery的情况下帮助我完成这项工作。如果不可能使用相同的解决方案，那么只需在滚动超过300px时将不同的CSS样式应用于项目。我已经看过了，但是Javascript和JQuery对我来说是陌生的

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
        $(document).on("scroll",function(){
            if($(document).scrollTop()>300){ 
                $("header").removeClass("large").addClass("small");
                }
            else{
                $("header").removeClass("small").addClass("large");
                }
            }); 
    </script>
</head>

---

我不知道为什么需要纯javascript而不是jquery。您可以使用此选项将代码更改为纯javascript

<script type="text/javascript">

   window.onscroll = function(){
       var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
       document.querySelector("header").setAttribute("class", (scrollTop>300)?"small":"large");
   }; 

</script>

window.onscroll=函数（）{
变量scrollTop=（window.pageYOffset！==未定义）？window.pageYOffset:（document.documentElement | | | document.body.parentNode | | document.body）.scrollTop；
document.querySelector（“header”）.setAttribute（“类”，（scrollTop>300）？“小”：“大”）；
}; 

简单演示

---

我只想让我的网站尽可能“精简”，并删除对外部文件的任何调用等。

<script type="text/javascript">

   window.onscroll = function(){
       var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
       document.querySelector("header").setAttribute("class", (scrollTop>300)?"small":"large");
   }; 

</script>