スクロールして下方からフェードインするfooter要素の下方に一瞬出来る空白を消したい

下記のサイトを元に、ページ下方にスクロールするとfooter要素が出現する実装をしました。
https://recooord.org/fadein-window-scroll/

HTML

<body>
<header>
ヘッダー
</header>
<section class="welcome_section">
  <div class="wrap">
    <div class="arrow"></div>
    <p>テキスト</p>
  </div>
</section>
<footer class="footer_nav fadeInUp">
  <div class="wrap">
    <ul class="footer_flex">
      <li>リスト</li>
      <li>リスト</li>
      <li>リスト</li>
      <li>リスト</li>
    </ul>
  </div>
</footer>
</body>

CSS

body {
  background-color: #000;
  height: 100%;
  color:#fff;
}
header {
  height:1500px;
}
.wrap {
  position: relative;
  max-width: 1030px;
  margin: 0 auto;
  height: auto;
}
.welcome_section {
  padding: 0 0 100px;
  font-size: 2.5rem;
  text-align: center;
}
.arrow {
  position: relative;
}
.arrow::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 50%;
  width: 20px;
  height: 20px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateX(-50%) rotate(135deg);
}
.welcome_section p {
  padding-top: 100px;
}

.footer_nav {
  width: 100%;
  height: 120px;
  background-color: #fff;
}
.footer_nav ul li {
  display: inline-block;
  color: #000;
}
.footer_flex {
  width: 80%;
  padding: 40px 0;
  margin-right: 10%;
  margin-left: 10%;
  flex-wrap: wrap;
  justify-content: space-between;
}
.footer_flex li {
  font-family: Arial,Raleway, "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
  width: 24%;
  text-align: center;
  font-size: 1.8rem;
  padding: ;
}
.fadeInUp {
  margin-bottom: -0.1px;
  opacity: 0;
  transform: translateY(80px);
  transition: 1.5s;
}

jQuery

$(function(){
  function animation(){
    $('.fadeInUp').each(function(){
      var target = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > target - windowHeight){
        $(this).css('opacity','1');
        $(this).css('transform','translateY(0)');
      }
    });
  }
  animation();
  $(window).scroll(function (){
    animation();
  });
});

footerがフェードインしてきたときにfooter下方に一瞬黒の余白が出来てしまいます。

おそらくスクロール量の取得がスクロールスピードに間に合っていないのではないかと思っています。（ページ下方でページをリロードした（スクロールをしない）際には余白は出現しません）

こういった場合、どのようにすれば余白を消すことが出来るのでしょうか。

macaron_xxx

2019/11/06 00:24

何が起こっているのかわからないので、再現できるコードをください。

kyoya0819

2019/11/06 02:53

問題を再現できません https://codepen.io/asuchi0819/pen/WNNzzvJ

行動規範の内容に同意します

回答1件

ベストアンサー

もっといい手が見つかれば追記しますが、ダミーの margin-bottom で改善するようです。

CSS
1.fadeInUp {
2  margin-bottom: -0.1px;
3}

jQuery
1        $(this).css({
2          'opacity': '1',
3          'transform': 'translateY(0)',
4          'margin-bottom': '0px'
5        });

投稿2019/11/06 03:05

x_x

総合スコア13749

tnk_fuku

2019/11/06 13:11

ご回答ありがとうございます。ご提示の実装をしてみましたが、下から出てくるというよりも、下までスクロールした際に上部の要素が下がってくる感じになりました。求めている形はなかなか難しいのでしょうか・・・。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

スクロールして下方からフェードインするfooter要素の下方に一瞬出来る空白を消したい

関連した質問