jquery навигационная анимация шоу

Question

jquery навигационная анимация шоу

0

Я создал навигацию 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);
});

Спасибо всем!

Paul Designer 25 сен. 2013, в 21:41

Источник

Теги:

jquery

navigation

slide

animation

2 ответа

Ещё вопросы

Manolo · Answer 1 · 2013-09-25T17-39-00.000Z

Попробуй это:

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

});

Привет, спасибо, но это не похоже на работу? Вы можете использовать jsfiddle, чтобы показать пример?
Может быть, это то, что вы хотите: jsfiddle.net/w2Xx7/1
Это не похоже на работу? : s Я хочу создать точный эффект, как этот nav wunderlist.com/en

dareKevil · Answer 2 · 2013-09-25T16-43-00.000Z

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

Привет, это здорово, спасибо. Можно ли сделать навигационное шоу, как только вы вернетесь назад к ???
Пожалуйста, отметьте один ниже, только что отредактированный
это не похоже на работу при прокрутке назад?
Посмотрите на 3-ю версию. Навигация показывает, как только прокрутите назад. 100 - это время анимации, так что вы можете изменить его ...