Javascript CSS在滚动时会发生变化，但会随滚动速度而变化

我想做通常的“滚动上的标题更改”。现在“更改”动画是纯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>

$（文档）.on（“滚动”，函数（）{
如果（$（文档）.scrollTop（）>100）{
$（“#header”）.removeClass（“大”）.addClass（“小”）；
}否则{
$（“#header”）.removeClass（“小”）.addClass（“大”）；
}
});

这就是我所做的（您可以看到我为什么希望连接动画/滚动）：

这是我想要的一个例子：。（您可能需要等待一段时间，直到巨大的壁纸出现。当您滚动时，css的变化速度与滚动速度相同）

我如何（使用jQuery）做到这一点？（我不赞成）或者你有更好、更漂亮的解决方案吗

最好的

Thomas

添加HTML属性（onscroll），您将在其中执行滚动操作

//HTML块

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

---

为了复制与Mac retina网页类似的效果，我会尝试捕捉功能事件，而不是用类来设置徽标（“Neue Liberale”）的动画，我会调整它的大小，只有当徽标的大小减小到一定大小时才让窗口滚动

例如，页面加载上的徽标宽度为442px，假设您希望在启动类动画并让用户向下滚动之前将其缩小25%

CSS: JS: JSFiddle：

---

这里有一个参考。

谢谢，这是正确的方向。但它似乎不随滚动速度变化，但速度太慢了。而且它只工作一次。一旦你上下滚动，我现在又有了旧的处理方式。你能用这种方法修改代码吗？那太棒了！没有pb！使用此解决方案AFAICT无法真正检测滚动速度，因为为了使内容不滚动，必须将溢出设置为

隐藏

，但可以通过增加

增量

值手动调整速度。至于只运行一次的动画，如果您将

window.animateOnce

设置为

false

，它将在您每次滚动时都会显示动画，而不仅仅是第一次。我更新了代码和小提琴，以修复一些怪癖：1。检测到向下滚动事件（因此动画仅在向下滚动时触发）；2.

animateOnce

选项现在按预期工作。

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%;
}

html.noscroll,
body.noscroll {
    overflow-y:hidden;
}

$(document).ready(function() {
    $("hmtl, body").addClass("noscroll");
    // Storing variables under window so they can be accessed by other scripts as well
    window.logoWidth = $("#logo").width();
    window.animated = false;
    // 'animateOnce' Will run the logo animation only once if set to true
    window.animateOnce = false;
});

$(document).on("mousewheel", function (e) {
    var switchClass = function() {
            $("html, body").removeClass("noscroll");
            if ($(document).scrollTop() > 10) {
                $("#logo").removeAttr("style");
                $("#header").removeClass("large").addClass("small");
            } else {
                $("#header").removeClass("small").addClass("large");
            }
        };
    if( e.originalEvent.wheelDeltaY > 0 ) {
        switchClass();
        return true;
    }  else {
        var animate = window.animated;
        if( !animate ) {
            var targetW = window.logoWidth * 0.75,
                currW = $("#logo").width(),
                // You can seed the animation up or down by changing the 'increment' (the higer the faster)
                increment = 0.20;
            if( currW > targetW ) {
                $("#logo").width( currW - (currW * increment) ); 
                return false;
            } else {
                if( window.animateOnce )
                    window.animated = true;
                switchClass();
                return true; 
            }
        } else {
            switchClass();
        }
    }
});