在Scroll上更新CSS代码:简化它就不会了'不要使用JQuery和最简单的Javascript

Update CSS Code on Scroll : Simplify so it doesn't use JQuery and just the simplest Javascript

本文关键字：Javascript 最简单 JQuery CSS 更新 Scroll 代码      更新时间：2023-09-26

我有这段代码（见下文）-我对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>

我想要的样品在这里http://www.goaoutreach.org/滚动经过主图像（或其附近）时，徽标会缩小。

当前CSS

small img{ width:50px; height:auto; top: -10px;  }
large img{ width:150px; height:auto; top: -10px; }
我不知道为什么你需要纯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>

简单的演示http://jsfiddle.net/tintucraju/hLtyq3t1/

相关文章：