スクロールで特定の部分をwindowに固定する、cssとjsの書き方

備忘録を兼ねて共有します。

方法

html

固定したい要素(以後.fixing-box)を別の要素(以後.fixing-base)で包みます。

fixing_sample.html

<div class="fixing-base">
  <div class="fixing-box">
  </div>
</div>

css

.fixing-base .fixing-box.fixedがwindowに固定される記述を追加します。

fixing_sample.css

.fixing-base .fixing-box.fixed {
  position: fixed;
  top: 0;
  z-index: 9999;
}

js

.fixing-baseより後にスクロールされた場合に下記の操作を行います。

• .fixing-boxに.fixedを追加する -> 固定
• .fixing-baseに.fixing-boxのmarginも含めた高さを設定する -> スクロール位置のズレ防止
• .fixing-boxに.fixing-baseの幅を設定する -> .fixing-boxの見栄え調整

fixing_sample.js

function(){
  // 固定する場所が存在することの確認
  if( $('.fixing-base .fixing-box').length > 0 ){
    var baseSelector = '.fixing-base'
    var fixingSelector = baseSelector + ' .fixing-box'

    $(window).on('load scroll resize', function(){
      var baseTop = $(baseSelector).offset().top

      //固定開始位置より後にスクロールされた場合
      if( $(window).scrollTop() > baseTop ){
        $(fixingSelector).addClass('fixed')
        $(baseSelector).height($(fixingSelector).outerHeight())
        $(fixingSelector).width($(baseSelector).width())

      //固定開始位置以前にスクロールされた場合
      } else {
        $(fixingSelector).removeClass('fixed')
        $(baseSelector).height('')
        $(fixingSelector).width('')
      }
    })
  }
}

以上です。

参考