Q&A
どこのなにがどうなる想定なのでしょうか？
実現したいこと
ステッキーを使って作成。
動作しない原因で自分で調べられる範囲は限界です。自分が気が付かない不動の原因を突き止めたいです。
発生している問題・分からないこと
スクロールしてもヘッダーの収縮がありません。
コードが長いので、こちらに貼り付けます。
リンク内容https://jsfiddle.net/5e41sgxh/10/
該当のソースコード
cssが多くて見ずらいですが、よろしくお願いします。
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
動作しない条件を自分なりに調べたが、見落としがあるかもしれません。
補足
特になし
回答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
総合スコア36601
ありがとうございます。しかし、コードを試してみたらsticky処理の無限ループになってしまいまして、対処方法が出来ずにいます。
.dummy{
position: relative;
top: 50px;
opacity: 0;
}
にするか、
positionそのものをカットするかで無限ループが止まりました。
一度は止まったはずなのに、また無限ループになっている！position直しただけではだめでした…
コードを見ないと何とも言えないですね……
おはようございます。
https://jsfiddle.net/vqfhdw2o/12/
コードを貼り付けました。
headerがスクロール、縦幅が収縮する段階で発生することがあります。
グーグルの検証画面で、header⇔sticky この切り替えが止まらなくなります。
.dummy{
position: absolute;
top: 50px;
opacity: 0;
}
この部分が怪しいです。
position: relative;にするか、
top: 50px;を消すか、あるいは、
両方を消すかした場合でも、無限ループが起きる頻度は減りますが、完全にsticky処理の無限ループ防げません。
width:1000プラス数十pxあたりで、発生します。
私がコードを変える前の<main>が使われていて、ヘッダーとコンテンツのみのコードでも、同じwidth幅でスクロールする段階で無限ループが起きていることに今朝気が付きました。
ほんとですね、私が書いたコードでも問題が発生しました。
スクロールアンカリングが働いているのが原因のようなので、
body {
overflow-anchor: none;
}
とすれば解決するようです。
ただ、これがベストかというとちょっと考えてしまいますね…… ヘッダー縮小拡大のトリガーに冗長を持たせるの方がいいような気がしてます。
ありがとうございました。.dummy{
position: relative;
}とbody {
overflow-anchor: none;
}で当面は対処します。
＞ヘッダー縮小拡大のトリガーに冗長を持たせる
この部分は今後の課題かもしれません。
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総合スコア115870
あなたの回答
tips
プレビュー
