【jQuery】下に固定要素を置くのでフッターの下を自動でズラす

【jQuery】下に固定要素を置くのでフッターの下を自動でズラす
ページの下に申し込みボタンをずっと表示させたいのですがフッターが隠れちゃうのですよねー、どうにかなりませんかねー?
自動でフッターの下をズラしちゃいましょうー

さっそく実装してみる

See the Pen 【jQuery】下に固定要素を置くのでフッターの下を自動でズラす by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

HTML

<section class="cta">
  <div class="cta_area">
    <div class="cta_box">
      <a href="https://125naroom.com/web/3982" target="_blank" class="_a">詳しくはこちら</a>
    </div>
  </div>
</section>

CSS

.cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(26, 70, 121, 0.8);
  border-top: 3px solid #f30d44;
  z-index: 2;
}
.cta_area {
  padding: 0 30px;
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
}
.cta_box {
  display: flex;
  justify-content: center;
}

jQuery

フッターをズラすというよりも、bodyの下を自動でズラすって感じですね。

$(function(){
  if( $('.cta') ){
    $(window).on({ 'load': setCta, 'resize': setCta });
    function setCta(){
      $('body').css('padding-bottom', $('.cta').outerHeight());
    }
  }
});

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。

さいごに

おー、すごーい
ヘッダーの上をズラしたい場合はちょっと応用しちゃえばオッケーですねー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

6

/

22

2024

Googleさんの
おすすめ

6

/

22

2024

デザインの記事

EHON HOTEL
  • 2024.06.21New
  • EHON HOTEL
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】ページ内リンクでスムーズスクロール(固定ヘッダーがあったら)