jquery - jquery Navigation animation show

Question

I have created a jquery navigation that hides on scroll down and shows on scroll back up.

I'm having trouble executing the following;

1) hide after 500px scrolled down.

2) slide in and out smoothly exactly like this navigation https://www.wunderlist.com/en/

3) There also seems to be a small bug making it not always show on scroll back up.

Here is my demo 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);
});

Thanks a bunch everyone !

Answer 1

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;
});

Answer 2

尝试这个：

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');  
    }
}

});