滚动时为值设置动画

Posted 2023-05-08

【中文标题】滚动时为值设置动画

【英文标题】：Animate Values while scrolling

【发布时间】：2013-06-15 06:09:18

【问题描述】：

我正在开发一个简单的单页网站。您可以通过单击固定导航内的链接进行导航。这个固定导航应该像这里看到的那样工作：http://www.teehanlax.com/story/medium/

像 Tehann / Lax 一样（固定导航，仅在您向上滚动时显示并在您向下滚动时消失）我可能可以自己完成。但我想稍微修改一下这个例子，所以它就像在这个网站上看到的那样工作： http://nzopera.com/2013/don-giovanni

在此示例中，导航的工作方式与 Tehann / Lax 网站上的类似，但有所不同。它不仅会动画，还会出现/消失，还会对您的滚动做出反应。我认为最好看看我在这里写下的最后一页，以了解我的意图。我怎样才能达到这样的效果？我知道如何检测您是向上还是向下滚动，请参阅我当前的代码。但我完全不确定是否根据您的滚动位置制作动画。

提前感谢您的帮助。

请检查我对这篇文章的回答，我试图更详细地描述我需要什么。

编辑：这是我目前得到的，但这只是普通的 jQuery 动画

$(function()
    var
        scrollTop = 0,
        lastScrollTop = 0, 
        delta = 50;

    $(window).scroll(function(event)
        scrollTop = $(this).scrollTop();

        if(Math.abs(lastScrollTop - scrollTop) <= delta)
            return;

        if (scrollTop > lastScrollTop)
            if($(".header").hasClass("header--active")) $(".header").removeClass("header--active").animate( top : -84 );
         else 
            if(!$(".header").hasClass("header--active")) $(".header").addClass("header--active").animate( top : 0 );
        
        lastScrollTop = scrollTop;
    );
);

【问题讨论】：

prinzhorn.github.io/skrollr

谢谢，但是这个插件对我的例子有用吗？据我所见，您必须为滚动动画使用数据属性，但我需要在 JS 中动态地执行此操作：向下滑动导航（显示），向上滚动时......我基本上需要的是一个 JS 函数来制作动画值，因此类似于： function linearMovement(startValue, endValue, time/distance in px);因此，要在 200px 中将 CSS 值从 0 设置为 80，jQuery 代码看起来像 $("element").css("width", linearMovement(0, 80, 200));是否存在这样的事情，或者这可能与 jQuery / JS 有关吗？

【参考方案1】：

因为你已经标记了 jQuery，你可以在用户滚动的事件上显示文本

类似：

$(window).scroll(function(e)
  //do stuff here 
 ); 

如果您想让它出现在某个点，例如您链接的网站上的导航，只需创建一个标志，如下例所示：

$(window).scroll(function() 
var ypos = window.pageYOffset;
var scroll_pos = 200;             

if(ypos > scroll_pos) 
    //do stuff here

);

更多详情请看这里：http://api.jquery.com/scroll/

【讨论】：

我知道并且我知道如何检测您是向上还是向下滚动。我不想在滚动时显示文本，但我想在向上滚动和隐藏时显示固定导航，当我再次向下滚动时。只需在此页面nzopera.com/2013/don-giovanni 上向下滚动一点，然后向上滚动。您会注意到导航动画。这只是基本的东西，但我不确定如何使用固定导航创建该效果，您可以在上面的示例链接中看到。

谢谢，但我想我没有详细描述我需要什么。我试图在我对第一篇文章的回答中多解释一点。我正在寻找您在我的示例链接中看到的向上/向下滑动效果。它不只是 jQuery slideUp 和 SlideDown，而是对您的滚动做出反应。因此我需要一个函数来为值设置动画（参见我对第一篇文章的回答）。