一定の距離をスクロールすると下から競り上がるバナーを作成する。
CSS
div#gn_lp.gn_lp_fixed.fixed {
position: absolute;
bottom: 0;
top: inherit;
transform: translate(0px, 0px);
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
z-index: 999999999999 !important;
opacity: 1;
}
div#gn_lp.gn_lp_fixed {
transform: translate(0px, 100px);
position: absolute;
width: 100%;
bottom: 0;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
top: inherit;
position: fixed;
z-index: 999;
opacity: 0;
}
js
//フローティング PC CSS 勝手に高さ合わせて固定
jQuery( function() {
var $offset = jQuery( '.gn_lp_fixed' ).offset();
jQuery( window ).scroll( function () {
if( jQuery( window ).scrollTop() > $offset.top ) {
jQuery( '.gn_lp_fixed' ).addClass( 'fixed' );
} else {
jQuery( '.gn_lp_fixed' ).removeClass( 'fixed' );
}
} );
} );