参考ページ https://haniwaman.com/header-fixed/

[ html]

<div class=”conversion_fixed”>
<div class=”conversion_bottom”>
<div class=”innerBox”>
<div class=”tp_conversionContents”>
<div class=”tp_conversionBox”>
<div class=”tp_conversion_left tp_conv_btn”>
<img src=”img/btn_blue.png” class=”hidden_md”>
<img src=”img/btn_blue_sp.png” class=”hidden_xs”>
</div>
<div class=”tp_conversion_right tp_conv_btn”>
<img src=”img/btn_orange.png” class=”hidden_md”>
<img src=”img/btn_orange_sp.png” class=”hidden_xs”>
</div>
</div>
</div>
</div>
</div>
</div>

[js]

jQuery( window ).on( ‘scroll’, function() {
if ( 1000 < jQuery( this ).scrollTop() ) { // 1000px以上スクロールしたら
jQuery( ‘.conversion_fixed’ ).addClass( ‘conversion_bottom’ );
} else {
jQuery( ‘.conversion_fixed’ ).removeClass( ‘conversion_bottom’ );
}
});

[css]

.conversion_fixed {
position: static;
bottom: -30px;
transition: all 0.3s ease 0s;
}

.conversion_fixed.conversion_bottom{
width: 100%;
padding: 20px 0 10px;
background: rgba(0, 0, 0, 0.35);
position: fixed;
left: 0;
bottom: 0;
z-index: 999;
}