一定の距離をスクロールすると下から競り上がるバナーを作成する。

一定の距離をスクロールすると下から競り上がるバナーを作成する。

 

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' );
}
} );

} );