SPの下に固定要素を配置するときにフッターの下を自動でズラす処理でPC時は無効にする

Question

現状ブラウザでスマホサイズからPCサイズになるとsetCta()メソッドのbodyの下にpadding-bottomが入るのですが
こちら画面幅767以上の時にはbodyの下にpadding-bottomがなくなるようにしたいです。

おこなったことで、matchMediaなどで画面幅767以下の場合function内処理実行すると書いてみたのですが
うまくいかず。
レクチャーいただけますと幸いです。

HTML

<div class="fixed-btn">
<div class="fixed-btn_area">
<div class="fixed-btn_body"><a target="_blank" rel="noopener noreferrer" href="/">hoge/a>
</div>
<div class="fixed-btn_body"><a href="/"><i class="fa-solid fa-phone"></i>hoge2</a>
</div>
</div>
</div>

css

.fixed-btn {
  position: fixed;
  right: 0;
  top: 50%;
  bottom: initial;
  transform: translate(0, -50%);
  width: 100%;
  max-width: 7rem;
  writing-mode: vertical-rl;
  padding: initial;
}

.fixed-btn_area .fixed-btn_body:nth-of-type(2){
  display: none;
}

.fixed-btn_body {
  padding: 2rem 0 0;
  text-align: center;
  display: flex;
  justify-content: center;
}

.fixed-btn p{
  padding: 1rem 0;
  width: 80%;
}


.fixed-btn a{  
  color:#fff;
  padding: 4rem 1.2rem;
  background-color:#00B0EC;
}

.fixed-btn a:hover{
  opacity: .8;
  color:#fff;
  text-decoration:none !important; 
}

@media (max-width:767px) {
  .fixed-btn {
    position: fixed;
    width: 100%;
    bottom: 0px;
    top: initial;
    z-index: 99;
    writing-mode:initial;
    max-width: initial;
    transform:none;
  }

  .fixed-btn_area{
    display: flex;
  }

  .fixed-btn_area .fixed-btn_body{
    width: calc(100% / 2);
  }

  .fixed-btn_body{
    padding: initial;
  }

  .fixed-btn a{
    width: 100%;
    padding:2rem;
    border: #fff 1px solid;
  }

  .fa-solid{
    display: inline-block;
    padding-right: 1rem;
  }

  .fixed-btn_area .fixed-btn_body:nth-of-type(2) {
    display: flex;
  }

  .fixed-btn a:hover{
    opacity: initial;
  }
}

js

  const callback = function(){

    if (window.matchMedia( '(max-width: 767px)' ).matches) {
        if( $('.fixed-btn') ){
            $(window).on({ 'load': setCta, 'resize': setCta });
            function setCta(){
              $('body').css('padding-bottom', $('.fixed-btn').outerHeight());
            }
    };

    const fixedBtn = $('.fixed-btn');
    fixedBtn.hide();

        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                fixedBtn.fadeIn();
            } else {
                fixedBtn.fadeOut();
            }
        });
    }
}

window.addEventListener('DOMContentLoaded', callback );
window.addEventListener('resize', callback );

Answer 1

window.matchMedia の使い方を間違ってますね。下記を参照してください。

JSのレスポンシブ対応をresizeからmatchMediaに移行した

イベントを入れ子にしているのもおかしいですね。
下記でどうでしょう。

const fixedBtn = $('.fixed-btn');
fixedBtn.hide();

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        fixedBtn.fadeIn();
    } else {
        fixedBtn.fadeOut();
    }
});

const mediaQueryList = window.matchMedia('(max-width: 767px)');

const listener = (event) => {
    if (event.matches) {
        $('body').css('padding-bottom', fixedBtn.outerHeight());
    } else {
        $('body').css('padding-bottom', 0);
    }
};
mediaQueryList.addEventListener("change", listener);
listener(mediaQueryList);

ただ、window.matchMedia を使わなくても、CSSのメディアクエリで実現できます。

@media (max-width: 767px) {
  body {padding-bottom: 3rem;} /* 追加 */
  
/* 略 */
}

Comments

[nanashissss]

ありがとうございます。
max-width: 767px以上の時は style="padding-bottom: 0px;"とはいるのですが、
767px以下の時にbodyの高さが取れない感じです

scrollイベントもしてない状態で。。

[hatena19]

CSSのメディアクエリを使用した実装例
https://codepen.io/hatena19/pen/WNyOpXr

[nanashissss]

ありがとうございます！