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

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

ただいまの
回答率

89.12%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 898

art_porokyu

score 41

ウインドウをスクロールした時に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で実装する方法

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+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();
    }
  });
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/07 19:23 編集

    ご回答ありがとうございます。
    昨夜、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();
    }
    });
    ```

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

    キャンセル

+2

ご提示の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');
  });
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/07 19:21

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

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

    キャンセル

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

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる