jquery导航动画展示

Question

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

我在执行以下操作时遇到问题；

1) 向下滚动 500 像素后隐藏。

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