jQueryでスティッキーヘッダー実装。

Question

ウインドウをスクロールした時にjQueryでheaderをfadeinさせたいのですが、どのようにすればいいでしょうか？

###参考サイト
Olta 参考サイト

###考え方
・予めfadeinさせたいheader-cloneを用意し、そのheader-cloneを既存のheaderの上に乗せる。
・header-cloneにopadity: 0;を指定し見えないようにする。
・CSSでheader-cloneに.activeをつけ、opacity: 1;を指定する。
・スクロールした際addClassでactiveをつけfadeinさせる。

html

<header id="header">
      <!-- hrader開始 -->
      <div class="header-first">
        <div class="header-call ">
          <!-- <img class="logo-clone" src="../images/logo.svg" alt=""> -->
          <img class="call" src="../images/icon-tel.svg" alt="">
          <p>050-3205-1008</p><sapn id="time">（10:00~18:00 土日祝日除く）</span>
          </div>
          <div class="global-nav">
            <ul>
              <li>運営会社</li>
              <li>よくある質問</li>
              <li>ログイン</li>
            </ul>
          </div>
      </div>
    </header>
    <!-- header終了 -->

      <!-- header-clone開始 -->
      <div class="header-clone">
        <div class="header-call-clone">
          <img class="logo-clone" src="../images/logo.svg" alt="">
          <img class="call-clone" src="../images/icon-tel.svg" alt="">
          <p>050-3205-1008</p><sapn id="time">（10:00~18:00 土日祝日除く）</span>
        </div>

        <div class="global-nav-clone">
          <div class="list-4"><a href="">無料登録して申し込む</a></div>
          <ul>
            <li>運営会社</li>
            <li>よくある質問</li>
            <li>ログイン</li>
          </ul>
        </div>
      </div>
      <!-- header-clone終了 -->

###CSS

.header-clone {
  height: 90px;
  opacity: 0;
  background-color: red;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
}

.header-clone.active {
  opacity: 1;
}

###jQuery

$(function() {

  $('#header').each(function(){
    var $window = $('winodow'),
        $header = $(this)
        threshold = $header.offset().top, //+ $header.outerHeight(),
        $clone = $('<div class="header-clone"></div>');

  $window.on('scroll',$.throttle(1000 / 15, function(){
    if($window.scrollTop() > threshold) {
      $clone.addClass('active').fadeIn();
    }else{
      $clone.removeClass('active').fadeOut();
    }
  }));
  $window.trigger('scroll');
  });
});

試したこと

スクロールしてもついてくるスティッキーヘッダーをJSで実装する方法

Answer 1

ご提示のjQueryを、

• $window変数のセットされている行のスペル違い　$('winodow')→$('window')
• $header変数のセットされている行のカンマ抜け
• プラグイン　$.throttleを読み込んでね

上記を改善してみてくださいな。
※下記は改善してみたものです。（プラグインは別途読み込んでね）
※jQueryのVer.は3.2.1で検証

HTMLは、

• ウィンドウサイズがスクロール出来るサイズでないとfadeInできないので、スクロール出来る高さをコンテンツに設定してくださいな。

$(function() {

  $('#header').each(function(){
    var $window = $(window),
        $header = $(this),
        threshold = $header.offset().top, //+$header.outerHeight(),
        $clone = $('.header-clone');

  $window.on('scroll',$.throttle(1000/15, function(){
    if($window.scrollTop() > threshold) {
      $clone.addClass('active').fadeIn();
    }else{
      $clone.removeClass('active').fadeOut();
    }
  }));
  $window.trigger('scroll');
  });
});

Comments

[art_porokyu]

ご回答ありがとうございます。
昨夜、headerーcloneをdisplay: none;にし、scrollしたらfadeInさせるというプログラムを組んでなんとかできるようになりました。

$.throttleがプラグインなのは初めて知りました！
自分でも調べてみます。
ありがとうございました。

Answer 2

• header-cloneにopadity: 0;を指定し見えないようにする。
  → opacity:0は透明なだけで要素自体は消えていないので、display:noneにする。
• CSSでheader-cloneに.activeをつけ、opacity: 1;を指定する。
• スクロールした際addClassでactiveをつけfadeinさせる。
  → fadeInだけで処理できるので、opacityの操作は不要。

.header-clone {
  height: 90px;
  display:none; /* 追加 */
  /* 削除
  opacity: 0;
  */
  background-color: red;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
}
/* 削除
.header-clone.active {
  opacity: 1;
}
*/

jQueryはコピペするうちにわけが分からなくなってしまった、という感じでしょうか？
これで一応動くと思いますが、まずは基礎知識を学ばれるようお勧めします。

$(function() {
  var $window = $(window),
      threshold = $('#header').outerHeight(),
      $clone = $('.header-clone');

  $window.on('scroll', function(){
    if($window.scrollTop() > threshold) {
      $clone.fadeIn();
    }else{
      $clone.fadeOut();
    }
  });
});

Comments

[art_porokyu]

ご回答ありがとうございます。
昨夜、headerーcloneをdisplay: none;にし、scrollしたらfadeInさせるというプログラムを組んでなんとかできるようになりました。

コピペするうちに・・・この変数はこの値を取得しているというのがこんがらがっている状態でした。笑

CODEISELEさんのコードでは本来のheaderが隠れてからheader-cloneがfadeInするコード（大多数のWEBサイトはそういう形式なのですが・・・）だったので、今回は模写のサイトに少しでも近づけるためthresholdを0,1に設定し、少量のスクロールでもheader-cloneが表示されるように改良してみました。

```js
var $window = $(window),
$clone = $('.header-clone'),
threshold = 0.1;//$('#header').outerHeight();

$window.on('scroll',function(){
if($window.scrollTop() > threshold) {
$clone.fadeIn();
}else{
$clone.fadeOut();
}
});
```

ありがとうございました！