回答編集履歴

2

調整

2024/06/06 00:56

投稿

yambejp
yambejp

スコア116814

test CHANGED
@@ -1,3 +1,50 @@
1
1
  IntersectionObserverで交差を監視する場合、rootに監視要素が含まれている必要があります。
2
2
  headerとmainの交差をチェックしたいのだと想像すると、独立しているので交差監視の対象にはなりません。
3
3
  なお今回rootをnullにすることでwindowとの交差になるのでmainは最初から表示されているのでheaderへのstickyクラスを付加する動作になります
4
+
5
+ # 参考
6
+ こんな感じでどうでしょう?
7
+ ```html
8
+ <script>
9
+ const crossing=()=>{
10
+ const hb=document.querySelector('header').getBoundingClientRect().bottom;
11
+ const mt=document.querySelector('main').getBoundingClientRect().top;
12
+ document.querySelector('header').classList.toggle('sticky',hb>mt);
13
+ }
14
+ window.addEventListener('DOMContentLoaded',crossing);
15
+ window.addEventListener('scroll',crossing);
16
+ </script>
17
+ <style>
18
+ .sticky{
19
+ background-Color:gray;
20
+ }
21
+ body{
22
+ margin:0;
23
+ }
24
+ header{
25
+ background-Color:yellow;
26
+ height:200px;
27
+ position:sticky;
28
+ top: 0;
29
+ }
30
+ .content{
31
+ background-Color:lime;
32
+ height:50px;
33
+ }
34
+ main{
35
+ position:relative;
36
+ top:0;
37
+ background-Color:aqua;
38
+ height:150%;
39
+ }
40
+ </style>
41
+ <body>
42
+ <header>
43
+ header
44
+ </header>
45
+ <div class="content">content</div>
46
+ <main>
47
+ main
48
+ </main>
49
+ </body>
50
+ ```

1

調整

2024/06/05 10:47

投稿

yambejp
yambejp

スコア116814

test CHANGED
@@ -1,2 +1,3 @@
1
1
  IntersectionObserverで交差を監視する場合、rootに監視要素が含まれている必要があります。
2
+ headerとmainの交差をチェックしたいのだと想像すると、独立しているので交差監視の対象にはなりません。
2
- 今回rootをnullにすることでwindowとの交差になるのでmainは最初から表示されているのでheaderへのstickyクラスを付加する動作になります
3
+ なお今回rootをnullにすることでwindowとの交差になるのでmainは最初から表示されているのでheaderへのstickyクラスを付加する動作になります