Show/Hide сноска при прокрутке вверх или вниз

Это то, что я пытаюсь сделать:Show/Hide сноска при прокрутке вверх или вниз

Показать div когда .scrollTop() > 20
fadeOut после задержки
Stop fadeOut когда :hover липкий сноска

Это мой jquery:

$(function() { 
    var targets = $(".footer-nav"); 
    if ($(window).scrollTop() > 20) { 
     $(this).addClass('show'); 
    } 
    $(window).scroll(function() { 
     var pos = $(window).scrollTop(); 
     if (pos > 10) { 
      targets.stop(true, true).fadeIn("fast").delay(2000).fadeOut(2000); 
     } else { 
      targets.stop(true, true).fadeOut(); 
     } 
    }); 
});

У меня возникли проблемы с точкой .3. Кроме того, когда я очень быстро передвигаю колесо прокрутки, мерцает липкий нижний колонтитул. Есть ли способ до оптимизировать/улучшить. Jsfiddle здесь. Благодарю.

источник

2015-10-26 Labanino

Я задавался вопросом, если вы уже пробовали принятый ответ - это Безразлично Фактически это предотвращает «fadeOut» при наведении нижнего колонтитула, который был основным вопросом. Кроме того, добавление классов не требуется, так как замирание в любом случае будет устанавливать «display: block» или «display: none». И прикрепление данных кажется очень обходным, чтобы установить простой тайм-аут. Не существует переключателя события прокрутки, поэтому, даже если затухание уже было применено, оно все равно попытается установить его для каждого события прокрутки. Затем, если вы идете туда и обратно вокруг точки переключения, это создаст анимацию. Выглядит аккуратно, но это не очень функционально. – Shikkediel

Липкий нижний колонтитул должен иметь в себе ссылки. Таким образом, при прокрутке вверх или вниз липкий нижний колонтитул fadeIn в случае, если вы хотите нажать любую ссылку и через пару секунд fadeOut. С вашим решением нижний колонтитул отображается только один раз, и когда вы снова прокручиваете его, он не появится. Я пробовал полноэкранный просмотр в jsfiddle с выбранным ответом и не работает правильно, но это делается в http://codepen.io/labanino/full/mexgmL/. Большое спасибо. – Labanino

Правда, мой код (который я и не удосужился уйти отсюда), похоже, имел недостаток, но принятый ответ действительно был частью дерьма. Я не мстителен, просто называя это, как будто вижу. Подозрительно поддержал также. – Shikkediel

Я предполагаю, что это именно то, что вы ищете:

Working : Demo

JQuery

$(window).scroll(function(event) { 
    function footer() 
    { 
     var scroll = $(window).scrollTop(); 
     if(scroll>20) 
     { 
      $(".footer-nav").fadeIn("slow").addClass("show"); 
     } 
     else 
     { 
      $(".footer-nav").fadeOut("slow").removeClass("show"); 
     } 

     clearTimeout($.data(this, 'scrollTimer')); 
     $.data(this, 'scrollTimer', setTimeout(function() { 
      if ($('.footer-nav').is(':hover')) { 
       footer(); 
      } 
      else 
      { 
       $(".footer-nav").fadeOut("slow"); 
      } 
     }, 2000)); 
    } 
    footer(); 
});

источник

2015-10-27 00:39:52 divy3993

Это выглядело интересно, но оказалось, что оно было ошибочным во многих отношениях. Жаль это говорить. – Shikkediel

Каким образом это было испорчено? – divy3993

Вы можете проверить комментарии, оставленные ниже вопроса. И действительно ... влево? Очень детски. – Shikkediel

Зарегистрируйте функцию mouseover, чтобы остановить затухающую анимацию и быстро погасить ее. Кроме того, внутри этого обработчика зарегистрируйте обработчик mouseout, который будет исчезать, а затем отменит сам себя.

$('.footer-nav').on('mouseover', function() { 
    $(this).stop().fadeTo(100, 1); 
    $(this).on('mouseout', function() { 
     $(this).stop().fadeOut(2000); 
     $(this).off('mouseout'); 
    }); 
});

Предыдущий ответ не регистрирует событие MouseOut так, что сноска исчезает, когда курсор уходит.

источник

2015-10-27 00:27:18

Show/Hide сноска при прокрутке вверх или вниз

ответ

Смежные вопросы