jquery导航动画显示

Question

我创建了一个jquery导航，它在向下滚动时隐藏，在向上滚动时显示。

我在执行以下内容时遇到问题;

1）向下滚动500px后隐藏。

2）像这个导航 https://www.wunderlist.com/en/一样顺利地滑入和滑出

3）似乎还有一个小错误，使其并不总是在向上滚动时显示。

这是我的演示http://jsfiddle.net/w2Xx7/

var scroll_pos = 0;
var scroll_time;
$(window).scroll(function() {
    clearTimeout(scroll_time);
    var current_scroll = $(window).scrollTop();
    if (current_scroll >= $('#site-header').outerHeight()) {
        if (current_scroll <= scroll_pos) {
            $('#site-header').removeClass('hidden');    
        }
        else {
            $('#site-header').addClass('hidden');  
        }
    }
    scroll_time = setTimeout(function() {
        scroll_pos = $(window).scrollTop();
    }, 100);
});

谢谢大家！

Answer 1

试试这个：

var scroll_pos = 0;
$(window).scroll(function() {
var current_scroll = $(window).scrollTop();
scroll_pos = $(window).scrollTop();
if (current_scroll >= $('#site-header').outerHeight()) {
    if (current_scroll <= scroll_pos) {
        $('#site-header').removeClass('hidden');    
    }
    else {
        $('#site-header').addClass('hidden');  
    }
}
});

Answer 2

var scroll_pos = 0;
var scroll_time;
$(window).scroll(function() {
clearTimeout(scroll_time);
var current_scroll = $(window).scrollTop();
if (current_scroll >= $('#site-header').outerHeight()) {
    if (current_scroll <= scroll_pos) {
        $('#site-header').animate({top:'0'});    
    }
    else {
        $('#site-header').animate({top:-52});  
    }
}
scroll_time = setTimeout(function() {
    scroll_pos = $(window).scrollTop();
    }, 100);
});

或简单的工作版本：

$(window).scroll(function() {
    var position = $("#site-header").offset();
    if (position.top <= 200) {
       $('#site-header').animate({top:0}, 100);    
    } else {
       $('#site-header').animate({top:-52},100);  
    }
});

顶部滚动版本：

var prev_pos = $(window).scrollTop();
$(window).scroll(function() {
    var position = $("#site-header").offset();
    var current_pos = $(window).scrollTop();
    if (position.top >= 200 && current_pos > prev_pos) {
       $('#site-header').animate({top:-52}, 100);
    } else {
       $('#site-header').animate({top:0}, 100);    
    }
    prev_pos = current_pos;
});