Появление или исчезновение на основе прокрутки

0 
$(document).scroll(function () {
    var y = $(this).scrollTop();

    if (y > 397) {
        $('#aboutNav.fixed').fadeIn(500);   
    } else {
        $('#aboutNav.fixed').hide();
    }
});

Как вы можете сказать, это показывает фиксированную навигацию. CSS отлично, позиционирование отличное. Тем не менее, я хочу, чтобы навигационная система стала видимой над 397px, и это прекрасно.

Однако я хочу, чтобы навигация затухала, когда я начинаю прокрутку:

.fadeIn(500);

Когда пользователь начинает останавливаться, чтобы посмотреть содержимое или что-то еще, я хочу, чтобы элемент исчезал

.delay(3000).fadeOut(350);

Я считаю, что это то, что можно сделать, выполняя оператор if в первом операторе if. Однако скрипт, проверяющий, прокручивается ли пользователь, и рабочий скрипт выше, похоже, сталкиваются.

Идеи, кто-нибудь?

  • 0
    Я не совсем понимаю. Хотите ли вы, чтобы навигация отображалась после начала прокрутки или когда она достигает 397 пикселей?
  • 0
    Пожалуйста, предоставьте jsfiddle того, что у вас есть
Показать ещё 1 комментарий
Теги:

2 ответа

2
Лучший ответ

Если я правильно вас пойму. Вы хотите, чтобы навигация исчезла, если ее выше 397px и только при ее прокрутке... Так что эта функция будет делать это. Если я неправильно понял ваш вопрос, уточните в комментариях

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));//Lets the timer know were scrolling

    //Hide/Show nav based on location
    var y = $(this).scrollTop();
    if (y > 397) {
        $('#aboutNav.fixed').fadeIn(500);   
    } else {
        $('#aboutNav.fixed').hide();
    }

    //TimeOut function that is only hit if we havent scrolled for 3 Seconds
    //In here is where you fade out the nav
    $.data(this, 'scrollTimer', setTimeout(function() {    
        $('#aboutNav.fixed').fadeOut();
        console.log("Haven't scrolled in 3s!");
    }, 3000));
});

JAN 23 UPDATE на основе вашего комментария

Вы можете добавить это вам в функцию $(document).ready()

$("#elementID").hover(function(){ 
    //show here (mouse over)
    $("#elementToShow").show();
},function(){
    //Start timeout here, (mouse out)
    setTimeout(function() {
        $("#elementToHide").hide();
    }, 3000);
}
Поделиться
  • 0
    Я буду обновлять источник, утром. Спасибо за пример. Отправлю обратно быстро.
  • 0
    Работает отлично. Есть ли способ добавить оператор if, в котором a fadeIn и будет запущен, если мышь находится между top: 61px и top: 160px. Который будет придерживаться функции тайм-аута выше. (в основном, когда пользователь вводит диапазон (61px - 160px) из верхнего окна просмотра (видимый экран ниже значения scrollTop 397px), fadeIn будет триггерами и будет вызываться тайм-аут.
Показать ещё 6 комментариев
2

Расширяясь от того, что ответит Кьерчон:

Поскольку нет реального способа рассказать, когда пользователь прокручивается (т.е. нет события для "завершенной прокрутки"), вам придется использовать метод задержки событий, называемый debouncing.

Debouncing в основном устанавливает тайм-аут для запуска некоторого кода (функции) в будущем, и если вызов, вызывающий функцию debounced, снова вызван, вы очищаете и перезапускаете тайм-аут, повторяя это до тех пор, пока событие не перестанет быть вызванным. Этот метод предназначен для предотвращения событий, которые многократно срабатывают (например, прокрутки и изменения размера), чтобы выполнять только после того, как окончательное событие срабатывает, и ваш завершенный (отброшенный) код, наконец, выполняется.

Вот хорошая статья об использовании методов debouncing в JS.

Пока я понимаю, что вам нужно (что я и думаю) - Здесь JSBin с некоторым рабочим кодом

Поделиться
  • 1
    Спасибо за объяснение, я бы зеленый как если бы мог! Как я уже говорил выше, проверю утром. Я предполагаю, что единственный способ, которым это можно было бы расширить, это установить переменные. Например, триггер высоты сверху, время задержки и затухания по всему сценарию. Но выглядит отлично. Думаю, мне повезло встретить большое сообщество!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню