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

Posted 2023-03-06

【中文标题】CSS在滚动时发生变化，但随着滚动速度

【英文标题】：CSS changes on scroll, but with the scroll speed

【发布时间】：2015-02-16 00:02:33

【问题描述】：

我想做通常的“滚动标题更改”。现在“变化”动画是纯 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）？ （我不是专业人士）或者你有更好、更漂亮的解决方案吗？

最好的

托马斯

【参考方案1】：

将 html 属性（onscroll）添加到您将滚动的父块。

//HTML块

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

//JS 块

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

【参考方案2】：

为了复制与 Mac Retina 网页类似的效果，我会尝试捕捉函数事件，而不是使用类为徽标（“Neue Liberale”）设置动画，我会调整它的大小，只让窗口如果徽标的大小已减小到一定大小，则滚动。

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

CSS：

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

JS：

$(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();
        
    
);

JSFiddle：

这里有一个JSFiddle 供参考。

【讨论】：

谢谢，这是正确的方向。但似乎它不会随着滚动速度而改变，但速度太慢了。而且它只工作一次。一旦你上下滚动，它又是我现在拥有的旧处理方式。你能用这种方式修复那个代码吗？那太棒了！

没有铅！您无法使用此解决方案 AFAICT 真正检测滚动速度，因为为了使内容不滚动，您必须将溢出设置为 hidden，但您可以通过增加 increment 值手动调整速度。至于只运行一次的动画，如果您将window.animateOnce 设置为false，它会在每次滚动时进行动画处理，而不仅仅是第一次。

我更新了代码和小提琴以修复一些怪癖： 1. 检测向下滚动事件（因此动画仅在向下滚动时触发）； 2. animateOnce 选项现在按预期工作。