jQueryでフッターをフェードイン・アウトさせたいが、点滅してしまう

Question

現在ランディングページを作成しており、
ファーストビューすぎたあたりから固定フッターをフェードインし、
ページ下部のフッターの手前あたりで固定フッターを今度はフェードアウトさせる、
というのをjQueryで実装したいのですが、
下のコードだと固定フッターがチカチカと点滅（フェードイン・フェードアウトを繰り返す状態）してしまい、フェードアウトがうまくいきません。

原因がわからず詰まってしまったので質問させてください。
どうすればフェードイン、フェードアウトをうまく実現できますか？

$(function(){
  var fixedFooter = $('.fixed-footer');
  fixedFooter.hide();
  $(window).scroll(function () {
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    var footHeight = $('footer').outerHeight();
    if ($(this).scrollTop() > 100) {
      fixedFooter.fadeIn();
      if (scrollHeight - scrollPosition <= footHeight + 200) {
        fixedFooter.fadeOut();
      }
    } else {
      fixedFooter.fadeOut();
    }
  });
});

HTMLは省略しますがこんな感じです。

<header>...</header>
<main>...
  <div class="fixed-footer">...</div>
</main>
<footer>...</footer>

Answer 1

fixedFooterにフェード系のアニメーションイベントが残っているためだと思います。
それらの際に.stop()を挟んでみたらいかがでしょうか？

fixedFooter.fadeOut();
↓
fixedFooter.stop().fadeOut();

尚この.stop()には引数が指定できますので、ご事情にあったものを使って試してみてください

【jQuery】stopメソッドを理解する

https://qiita.com/SotaSuzuki/items/92679f0135db3f0f85f6

Comments

[mamemam]

回答ありがとうございます。
おっしゃるとおり、fadeInと1つ目のfadeOutに.stop()をつけたら綺麗に動きました！
大変助かりました。ありがとうございました！！