ページの下に申し込みボタンをずっと表示させたいのですがフッターが隠れちゃうのですよねー、どうにかなりませんかねー？
自動でフッターの下をズラしちゃいましょうー
さっそく実装してみる
HTMLとCSSとjQueryはこちら
HTML
1 2 3 4 5 6 7 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .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の下を自動でズラすって感じですね。
1 2 3 4 5 6 7 8 | $(function(){ if( $('.cta') ){ $(window).on({ 'load': setCta, 'resize': setCta }); function setCta(){ $('body').css('padding-bottom', $('.cta').outerHeight()); } }}); |
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。
さいごに
おー、すごーい
ヘッダーの上をズラしたい場合はちょっと応用しちゃえばオッケーですねー
