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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

427閲覧

画面スクロールで収縮するヘッダーを作成したが、作動しません。設定の不備があれば修正したい

naaS

総合スコア6

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2024/06/05 09:33

実現したいこと

ステッキーを使って作成。
動作しない原因で自分で調べられる範囲は限界です。自分が気が付かない不動の原因を突き止めたいです。

発生している問題・分からないこと

スクロールしてもヘッダーの収縮がありません。
コードが長いので、こちらに貼り付けます。
リンク内容https://jsfiddle.net/5e41sgxh/10/

該当のソースコード

cssが多くて見ずらいですが、よろしくお願いします。

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

動作しない条件を自分なりに調べたが、見落としがあるかもしれません。

補足

特になし

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

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

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

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

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

yambejp

2024/06/05 09:48

どこのなにがどうなる想定なのでしょうか?
naaS

2024/06/05 09:54

画面をスクロールした時に、ヘッダーの縦の寸法が短い状態(既にスクロールが終了)したような状態になります。収縮はしません。
naaS

2024/06/05 09:55

スクロール前はヘッダーの縦の寸法がもう少し長い状態のはずなのですが思い通りになりません。
guest

回答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

Lhankor_Mhy

総合スコア36852

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

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

naaS

2024/06/06 07:20

ありがとうございます。しかし、コードを試してみたらsticky処理の無限ループになってしまいまして、対処方法が出来ずにいます。
naaS

2024/06/06 07:51

.dummy{ position: relative; top: 50px; opacity: 0; } にするか、 positionそのものをカットするかで無限ループが止まりました。
naaS

2024/06/06 07:57

一度は止まったはずなのに、また無限ループになっている!position直しただけではだめでした…
Lhankor_Mhy

2024/06/06 09:15

コードを見ないと何とも言えないですね……
naaS

2024/06/06 22:37

おはようございます。 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幅でスクロールする段階で無限ループが起きていることに今朝気が付きました。
Lhankor_Mhy

2024/06/07 00:29

ほんとですね、私が書いたコードでも問題が発生しました。
Lhankor_Mhy

2024/06/07 00:58

スクロールアンカリングが働いているのが原因のようなので、 body { overflow-anchor: none; } とすれば解決するようです。 ただ、これがベストかというとちょっと考えてしまいますね…… ヘッダー縮小拡大のトリガーに冗長を持たせるの方がいいような気がしてます。
naaS

2024/06/07 13:24

ありがとうございました。.dummy{ position: relative; }とbody { overflow-anchor: none; }で当面は対処します。 >ヘッダー縮小拡大のトリガーに冗長を持たせる この部分は今後の課題かもしれません。
guest

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
yambejp

総合スコア116311

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

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

naaS

2024/06/05 12:54

このコードは最近学習している最中で、完全に理解が至らない部分があります。 headerとmainの関係が十分に繋がっていない、(独立しているので交差監視)させるためにはどうするべきか、コードの書き方から変えるべきか、 要素を追加すべきかとか、いろいろ考えています。
yambejp

2024/06/06 00:58

参考ソースを追記しておきました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.38%

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

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

質問する

関連した質問