Help us understand the problem. What is going on with this article?

もう位置やサイズを気にしなくてもいい!JQueryで実装するスクロールすると追従するフローティングメニュー 2018年版

More than 1 year has passed since last update.

少し前の記事ですが、JQuery Advent Calendar 2017 に寄稿させていただきます。

なにがしたい?

名称未設定-2.jpg

たとえばサイドバーに置いたローカルメニューや広告エリアなどの特定のエリアをスクロールしてもずっと表示しておく、というのをよく見かけます。
基本は「スクロールがその要素の位置を超えたら position を fixed に変更する」だけで考え方はとてもカンタンなのですが、これをそのままそれだけ実装するとどうなるか。1つは、fixed にしたことで親要素からの束縛から解放されてとても伸び伸びとした要素になってしまうことがあります。もう1つは、前後関係というしがらみからも開放されるため後続要素が詰められて位置が変わってしまうことがあります。

1つ目の問題には、予めCSSでフローティングした後のサイズを書いておく、という手法がメジャーですが……、これ、ちょとめんどくさい。というよりレスポンシブとかどうするんですか!? そのレスポンシブの位置関係がBootstrapなど外部ライブラリで定義されているともっとめんどくさいですよーー!

2つ目の問題は、例えばこれが、画面トップのNavbar的なものだと、BODY要素に padding-top を設定したり、BEFORE疑似セレクタで高さを確保させたりします。が、これってNavbar的なものにしか使えなくないですか? もっと色んな所に使いたーーい!

という問題を解決ようとJSを書いていたら、そこそこキレイにまとまったものができたので、良ければ使っていただきたい、というのが本校の趣旨です(๑•̀ㅂ•́)و✧

結論

出来上がったコードがコチラです。

<style>
.js-floating-floater.fixed { position: fixed; z-index: 100; }
</style>

<script>
$(function(){
  $(window).scroll(fixedFloater);
  $(window).resize(fixedFloater);
  fixedFloater();
  function fixedFloater(){
    var header_height = 0; // 固定ヘッダがある場合、その高さ
    $('.js-floating').each(function(){
    $placeholder = $(this);
    $floater     = $(this).children('.js-floating-floater');
    if( window.scrollY + header_height > $(this).offset().top ){
      $floater.width( $placeholder.width() );
      $placeholder.height( $floater.height() );
      $floater.addClass('fixed').css('top',header_height+'px');
    } else {
      $floater.width( '' );
      $placeholder.height( '' );
      $floater.removeClass('fixed');
    }
    });
  }
});
</script>

<div class="js-floating">
  <div class="js-floating-floater">
    フローティングメニュー
  </div>
</div>

具体的にBootstrapで適用してみたコードは末尾に用意しますね。

解説

Placeholder を用意する

ポイントは、実際にフローティングするfloaterを、フローティングしない placeholder で囲っておくところです。floaterはfixedにしたとたん文字通り位置の制約から解き放たれてどこともなく羽ばたいていきコントロール困難になります。それをムリに追いかけようとするよりも、もともとの位置をマーキングしておくだけでコントロールがとても簡単になります。

div.jpg

Placeholderからは幅 Floaterから高さを取得して交換する

fixedされたfloaterは相対的な位置やサイズ情報を失います。そして、placeholderは中身が空っぽになり高さを失います。でも、placeholderはまだ幅を持っています。なのでこの幅をfloaterに与えます。幅を与えられたfloaterはそれに合わせて中身を整形し高さを取り戻します。なので、これをplaceholderに返します。こうすると、フローティングする前後で、placeholderもfloaterも、サイズ情報が変わらなくなります。

課題

まずはスッキリシンプルに実装してみよう!というところなので、いくつか未実装の課題があります。

  1. スクロールイベントで毎回サイズ調整をしている。ちょっと負荷が気になります。scrollとresizeで中身をちょっと変えれば解決される問題ですが、本稿の本筋とそれるので省略……。
  2. iOSの慣性スクロール中は位置が変更されない。touchmoveを使うとちょっと改善されますが理想的な動きにはなりません。どうも仕様のようで世界的な未解決問題。
  3. placeholderやfloaterにデフォルトの高さや幅が指定されているとクリアされてしまう$placeholder.height( '' );とやっているところです。基本的にはplaceholderやfloaterには幅や高さを指定せず、placeholderの外側や、floaterの内側でなんとかする前提です。

Bootstrapに応用

実際にBootstrapの②カラムレイアウトに適用してみた例です。下記コードはHTMLもBODYも無いけど、そのままコピーしてindex.htmlとして保存すればブラウザで開きます。固定ヘッダの高さ分だけ下がったところにフローティングする小技も。

sample.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>


<style>
.js-floating-floater.fixed { position: fixed; z-index: 100; }
</style>

<script>
$(function(){
  $(window).scroll(fixedFloater);
  $(window).resize(fixedFloater);
  fixedFloater();
  function fixedFloater(){
    var header_height = $('.navbar').outerHeight() + 15; // ここで固定メニューの高さ(と余白)を与えています
    $('.js-floating').each(function(){
    $placeholder = $(this);
    $floater     = $(this).children('.js-floating-floater');
    if( window.scrollY + header_height >= $(this).offset().top ){
      $floater.width( $placeholder.width() );
      $placeholder.height( $floater.height() );
      $floater.addClass('fixed').css('top',header_height+'px');
    } else {
      $floater.width( '' );
      $placeholder.height( '' );
      $floater.removeClass('fixed');
    }
    });
  }
});
</script>


<style>
body { padding-top:70px; }
main { background: #eee; }
.menu  { background: rgba(246,225,141,0.5); }
/* js-floating...はJS用のクラスなのでデザイン用に別クラスを用意するのがベター */
.floater { background: rgba(91,174,218,0.5); }
.placeholder { box-shadow: 10 10 10 rgba(0,0,0,0.2); }
</style>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

<div class="container">
<div class="row">
<main class="col-8 mb-4">
メインコンテンツ
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>

<aside class="col-4 mb-4">

<div class="menu mb-4">サイドメニュー<br><br><br><br></div>

<div class="js-floating floating_menu mb-4 placeholder">
  <div class="js-floating-floater floater">
    <!-- この中身はいろいろ自由にできます -->
    フローティングメニュー
    <br><br><br><br><br><br>
  </div>
</div>

<div class="menu mb-4">サイドメニュー<br><br><br></div>

</aside>

感想・余談

ここまで書いてきてあれですが、BootstrapのプラグインでAffix Pluginというのがあるそうです……。
https://www.w3schools.com/bootstrap/bootstrap_affix.asp

最近、フローティングに限らず、この placeholder を置くというやりかたをよくするようになりました。その1つのパターン、でしょうか。

kd9951
インフラからデザインまで。ワンストップでWEBアプリケーション開発しているエンジニア。メインはPHP/Laravelでの業務系システム開発。WordpressやAugnlarあたりも守備範囲。自称「穴埋め係」でGoogleやQiitaに無かった記事を書くことが多いので、誰得なマニアックな記事が多いです(*´ω`*)    園芸が好きで「多肉植物図鑑PUKUBOOK」を制作し編集長をしています。
https://pukubook.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした