javascript - CSS 在滚动时发生变化，但随着滚动速度的变化

Question

我想做通常的“滚动时标题更改”。现在“改变”动画是纯 CSS3 动画，这意味着动画自己运行，但我希望它与滚动速度同时运行。

现在:

<script type="text/javascript">
    $(document).on("scroll",function(){
        if($(document).scrollTop()>100){
            $("#header").removeClass("large").addClass("small");
        } else{
            $("#header").removeClass("small").addClass("large");
        }
    });
</script>

这就是我所做的(你可以看到我为什么要连接动画/滚动): http://thomasmaier.me/beispiel/

这是我想要的示例:http://www.apple.com/imac-with-retina/ . (您可能需要稍等片刻，直到出现巨大的壁纸。当您滚动时，css 会以与滚动相同的速度变化)。

我该怎么做(使用 jQuery)？ (我不是专业人士)或者您有更好、更漂亮的解决方案吗？

最佳

托马斯

Answer 1

将 HTML 属性 (onscroll) 添加到您将要滚动的父 block 中。

//HTML block

<main onscroll = myfunction(event) </main>   //make sure you pass the event parameter

//JS block

function myfunction(e){
   window.MainBlock = e.target; //set event element to a variable
   window.ScrollVert = e.scrollY; //live feed of vertical scroll position

   //add simple if statement based on values to change zoom value based on the scrollY.
   MainBlock.style.zoom = "100%"
}
//CSS BLOCK
.main {
  zoom: 150%;
}