滚动时为值设置动画

Question

我正在开发一个简单的单页网站。您可以通过单击固定导航内的链接进行导航。这个固定导航应该像这里看到的那样工作：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;
    });
});

Answer 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/