固定表示されているヘッダーの色を特定の高さまでスクロールしたら背景色を追加する方法。
JS
1 2 3 4 5 6 7 |
jQuery( window ).on( 'scroll', function() { if ( 300 < jQuery( this ).scrollTop() ) { jQuery( '.header-color' ).addClass( 'change-color' ); } else { jQuery( '.header-color' ).removeClass( 'change-color' ); } }); |
CSS
1 2 3 4 5 6 7 8 |
.header-color { background:rgba(0,0,0,0) !important; position:fixed; transition: all .5s; } .header-color.change-color{ background-color:rgba(65, 65, 64, 0.9) !important; } |
背景色は適宜変更してください。
コメントを残す