Question

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

Answer 1

我不知道为什么你需要纯粹的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/

更新Scroll上的CSS代码：简化，因此它不使用JQuery，只使用最简单的Javascript

1 个答案: