質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

4378閲覧

固定ヘッダーの背景色をスクロールで変更したい

cofcof

総合スコア37

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/08/27 13:49

編集2018/08/28 05:38

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です。
どなたか解決方法を教えてください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/08/27 14:24

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、エラーは出ていませんか?デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error
x_x

2018/08/28 01:05

問題ないように見えますが、念のためCSSもつけてください
cofcof

2018/08/28 05:39

コードブロックで囲み、cssを記述しました。consoleにエラーは表示されておりません。
guest

回答1

0

ベストアンサー

contents も position:fixed; なら、window でスクロールは発生しないのでは?
conetnts でスクロールさせたいなら対象を変更しなければなりません。

jQuery

1 $('#contents')[0].addEventListener('scroll', function(event) { 2 // 処理。 3 }, { passive: true });

投稿2018/08/28 06:09

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cofcof

2018/08/29 08:46

おおっ、そういうことなのですね! つまりcontentsのfixedを避けるもしくは、スクロールの対象を変更する必要があったのですね。 解決しました、ありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問