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/

滚动时设置动画值

1 个答案: