Javascript 如何使标题在向下滚动时隐藏，并在向上滚动5倍时显示（如google+）？

我试图使我的顶部导航栏在向下滚动至少5px后消失，并在快速向上滚动5px后重新出现。与google+header非常相似。我尝试过搜索任何教程，也尝试过一些js和jQuery方法，但似乎无法让它们正常工作。查看

HTML:

---

没有深入了解他们是如何实现的。您可以将跟踪滚动位置和使用js呈现滚动位置的更改结合使用：

var scroll_pos = 0;
var scroll_time;

$(window).scroll(function() {
    clearTimeout(scroll_time);
    var current_scroll = $(window).scrollTop();

    if (current_scroll >= $('#topNav').outerHeight()) {
        if (current_scroll <= scroll_pos) {
            $('#topNav').removeClass('hidden');    
        }
        else {
            $('#topNav').addClass('hidden');  
        }
    }

    scroll_time = setTimeout(function() {
        scroll_pos = $(window).scrollTop();
    }, 100);
});

---

在这里查看它的实际操作：

没有深入了解它是如何实现的。您可以将跟踪滚动位置和使用js呈现滚动位置的更改结合使用：

var scroll_pos = 0;
var scroll_time;

$(window).scroll(function() {
    clearTimeout(scroll_time);
    var current_scroll = $(window).scrollTop();

    if (current_scroll >= $('#topNav').outerHeight()) {
        if (current_scroll <= scroll_pos) {
            $('#topNav').removeClass('hidden');    
        }
        else {
            $('#topNav').addClass('hidden');  
        }
    }

    scroll_time = setTimeout(function() {
        scroll_pos = $(window).scrollTop();
    }, 100);
});

---

看看这里的实际情况：

效果非常好，这是我需要的90%。我仍然希望它只出现在向上滚动，如果用户滚动真的很快，如果他们滚动正常或缓慢，我希望导航保持隐藏。可能吗？另一个问题。。。我在导航的底部添加了一个标题，你可以在chitt-chat.com上看到。标题由导航覆盖，我希望它位于导航下，并在导航隐藏时向上移动。如果需要，我可以发布标题的代码和CSS？是的，那太好了。在这种情况下，你可能想添加一些过渡，并做一些类似这样的动画：-我对检测滚动速度并不熟悉，所以在这方面我帮不了你。刚刚遇到这个问题。我写了一个小部件来解决这个问题。允许您对上/下滚动的元素执行操作，在触发更改之前对滚动量有一个公差，例如必须移动>5 px，并且在触发之前有一个偏移量，例如从顶部开始必须>200 px。如果你感兴趣的话，你可以在这里找到：效果非常好，这是我需要的90%。我仍然希望它只出现在向上滚动，如果用户滚动真的很快，如果他们滚动正常或缓慢，我希望导航保持隐藏。可能吗？另一个问题。。。我在导航的底部添加了一个标题，你可以在chitt-chat.com上看到。标题由导航覆盖，我希望它位于导航下，并在导航隐藏时向上移动。如果需要，我可以发布标题的代码和CSS？是的，那太好了。在这种情况下，你可能想添加一些过渡，并做一些类似这样的动画：-我对检测滚动速度并不熟悉，所以在这方面我帮不了你。刚刚遇到这个问题。我写了一个小部件来解决这个问题。允许您对上/下滚动的元素执行操作，在触发更改之前对滚动量有一个公差，例如必须移动>5 px，并且在触发之前有一个偏移量，例如从顶部开始必须>200 px。如果您感兴趣，可以在此处找到：

var scroll_pos = 0;
var scroll_time;

$(window).scroll(function() {
    clearTimeout(scroll_time);
    var current_scroll = $(window).scrollTop();

    if (current_scroll >= $('#topNav').outerHeight()) {
        if (current_scroll <= scroll_pos) {
            $('#topNav').removeClass('hidden');    
        }
        else {
            $('#topNav').addClass('hidden');  
        }
    }

    scroll_time = setTimeout(function() {
        scroll_pos = $(window).scrollTop();
    }, 100);
});

#topNav.hidden {
    display: none;
}