-3

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

1 回答 1

0

当您标记 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/

于 2013-06-18T21:17:41.067 回答