Q&A
「mq.matches」の後ろの全角空白文字もそのまま書いているのでしょうか？
モバイルサイトの際にだけ適用させたいイベントがあり
指定したサイズでなおかつ画面がスクロールした際に
Window.scrollYからheaderのoffsetTopからの差が起きた際のイベントとして
下記のようにしてイベント等を付与したいのですが
コンソールbは出るのですがaの方が出力されませんでした
また
&& window.scrollY > topOfmenu コード
を取り除いた場合はaも出力されました
解決方法を教えていただきたいです
よろしくお願いいたします
また、別にコピペで撮ってきた際に
handle と mq.matches がどういう意味合いで使われているかを調べても中々出てこず
イベントの発生に関係するのだろうという推測しかないので
もしご存知でしたらそちらも教えていただきたいです
よろしくお願いいたします
<HTML> ``` <header> <div id="mobile_bar"> <h1 id="main_title">Title</h1> <p id="mobile_menu">MENU</p> </div> <nav id="menu_bar"> <ul id="menu_list"> <li><a href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Blog</a></li> </ul> </nav> </header> コード ``` <javascript> ``` let menu = document.getElementsByTagName('header')[0]; let topOfmenu = menu.offsetTop;let media_menu = matchMedia('(max-width: 435px)');
handle(media_menu);
media_menu.addListener(handle);
function handle(mq) {
if (mq.matches && window.scrollY > topOfmenu) {
// ウィンドウサイズが435px以下のとき
console.log('a');
} else {
// それ以外
console.log('b');
}
};
コード
また、scrollY を見る必要性がわからないので説明願います。
回答1件
0
handle関数は、スクリーンサイズが変更されたときしか発火しないので、スクロールに合わせて発火したいなら、scrollイベントを用いるべきでしょう。
js
1window.addEventListener( 'scroll', e => { 2 if (media_menu.matches && window.scrollY > topOfmenu) console.log('a') 3} );
投稿2020/03/06 09:15
総合スコア36158
あなたの回答
tips
プレビュー
