実現したいこと
ステッキーを使って作成。
動作しない原因で自分で調べられる範囲は限界です。自分が気が付かない不動の原因を突き止めたいです。
発生している問題・分からないこと
スクロールしてもヘッダーの収縮がありません。
コードが長いので、こちらに貼り付けます。
リンク内容https://jsfiddle.net/5e41sgxh/10/
該当のソースコード
cssが多くて見ずらいですが、よろしくお願いします。
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
動作しない条件を自分なりに調べたが、見落としがあるかもしれません。
補足
特になし
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ベストアンサー
条件がよくわからないのですが、『50pxスクロールしたら』みたいなことをしたい感じでしょうか?
いろいろなやり方があると思いますが、ページトップから50px下にダミー要素を置いておくのはどうでしょうか。
https://jsfiddle.net/Lhankor_Mhy/xr46j9ae/
html
1</header> 2<div class="dummy"></div>
css
1.dummy{ 2 position: absolute; 3 top: 50px; 4 opacity: 0; 5}
js
1 document.addEventListener('DOMContentLoaded', function() { 2 new IntersectionObserver( 3 (entries, observer) => { 4 entries.forEach((entry) => { 5 if (entry.isIntersecting) { 6 document.querySelector('header').classList.remove('sticky'); 7 } else { 8 document.querySelector('header').classList.add('sticky'); 9 } 10 }); 11 }, 12 { 13 root: document, // 'null' に設定するとビューポートがルートとして使用されます ← jsFiddle は iframe を使っているので、documentで。 14 rootMargin: "0px 0px 0px 0px", 15 threshold: Array.from({ length: 2 }, (v, i) => i / 1), // 閾値は0と1の配列 16 } 17 ).observe(document.querySelector('.dummy')); 18 });
投稿2024/06/06 02:29
総合スコア36852
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/06/06 07:20
2024/06/06 07:51
2024/06/06 07:57
2024/06/06 09:15
2024/06/06 22:37
2024/06/07 00:29
2024/06/07 00:58
2024/06/07 13:24
0
IntersectionObserverで交差を監視する場合、rootに監視要素が含まれている必要があります。
headerとmainの交差をチェックしたいのだと想像すると、独立しているので交差監視の対象にはなりません。
なお今回rootをnullにすることでwindowとの交差になるのでmainは最初から表示されているのでheaderへのstickyクラスを付加する動作になります
参考
こんな感じでどうでしょう?
html
1<script> 2const crossing=()=>{ 3 const hb=document.querySelector('header').getBoundingClientRect().bottom; 4 const mt=document.querySelector('main').getBoundingClientRect().top; 5 document.querySelector('header').classList.toggle('sticky',hb>mt); 6} 7window.addEventListener('DOMContentLoaded',crossing); 8window.addEventListener('scroll',crossing); 9</script> 10<style> 11.sticky{ 12 background-Color:gray; 13} 14body{ 15margin:0; 16} 17header{ 18 background-Color:yellow; 19 height:200px; 20 position:sticky; 21 top: 0; 22} 23.content{ 24 background-Color:lime; 25 height:50px; 26} 27main{ 28position:relative; 29top:0; 30 background-Color:aqua; 31 height:150%; 32} 33</style> 34<body> 35<header> 36header 37</header> 38<div class="content">content</div> 39<main> 40main 41</main> 42</body>
投稿2024/06/05 10:44
編集2024/06/06 00:56総合スコア116311
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。