fixedで固定されているヘッダーの背景色を、一画面分スクロールした後で変更したいです。
htmlの内容
html
1<header> 2 Position:fixedで固定されているヘッダーです。 3</header> 4<div id="contents"> 5 <div id="top"> 6 高さ100vhのファーストビューが入ります。 7 </div> 8 <main> 9 以下コンテンツが入ります。
これに対して、以下のようなjqueryを記述してみましたが、動きませんでした。
具体的にはmainがページ上部まで来たらheaderにclass='bback'を付与して背景色を変更させようと考えていました。
scriptの内容
javascript
1$(function(){ 2 $(window).scroll(function() { 3 var top_count = $(document).scrollTop(); 4 var main_count = $('main').offset().top; 5 if ( main_count < top_count ) { 6 console.log(main_count); 7 $('header').addClass('bback'); 8 } else { 9 $('header').removeClass('bback'); 10 } 11 }); 12});
cssの内容
css
1header { 2 height: 50px; 3 position: fixed; 4 z-index: 1000; 5 width: 100%; 6 min-width: 320px; 7 top: 0; 8 left: 0; 9} 10header.bback { 11 background: rgba(0,0,0,0.5); 12} 13#contents { 14 position:fixed; 15 top:0; 16 right:0; 17 bottom:0; 18 left:0; 19 min-height:100vh; 20 overflow-y:scroll; 21 width:100%; 22} 23#top { 24 background: #000; 25 width: 100%; 26 height: 100vh; 27 overflow: hidden; 28 position: relative; 29} 30main { 31 padding: 0.5rem; 32 min-height: calc(100vh - 300px);/*フッター固定用の指定です*/ 33}
jQueryのバージョンは2.24です。
どなたか解決方法を教えてください。
回答1件
あなたの回答
tips
プレビュー