質問編集履歴
1
正常に実装される別ページのコードを記載しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -34,6 +34,15 @@
|
|
|
34
34
|
</div>
|
|
35
35
|
</body>
|
|
36
36
|
|
|
37
|
+
---別ページのhtml---
|
|
38
|
+
<div class="contact-top big-bg" id="contact-top">
|
|
39
|
+
<header>
|
|
40
|
+
<div class="header-wrapper">
|
|
41
|
+
...
|
|
42
|
+
</div>
|
|
43
|
+
</header>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
37
46
|
```
|
|
38
47
|
|
|
39
48
|
```CSS
|
|
@@ -61,6 +70,16 @@
|
|
|
61
70
|
transition: all .1s;
|
|
62
71
|
}
|
|
63
72
|
|
|
73
|
+
---別ページのcss---
|
|
74
|
+
.contact-top {
|
|
75
|
+
background-image: url(../images/contact-page-bgi@2x.jpg);
|
|
76
|
+
height: 40vw;
|
|
77
|
+
position: relative;
|
|
78
|
+
}
|
|
79
|
+
.header-bg {
|
|
80
|
+
background-color: #282F35; transition: all .1s;
|
|
81
|
+
}
|
|
82
|
+
|
|
64
83
|
```
|
|
65
84
|
|
|
66
85
|
```jQuery
|
|
@@ -73,6 +92,16 @@
|
|
|
73
92
|
$('header').removeClass('header-bg');
|
|
74
93
|
}
|
|
75
94
|
});
|
|
95
|
+
|
|
96
|
+
---別ページのjQuery---
|
|
97
|
+
$(window).on('load scroll',function() {
|
|
98
|
+
var contactTopHeight = $('#contact-top').outerHeight();
|
|
99
|
+
var scroll = $(this).scrollTop();
|
|
100
|
+
if(scroll > contactTopHeight) {
|
|
101
|
+
$('header').addClass('header-bg');
|
|
102
|
+
} else { $('header').removeClass('header-bg');
|
|
103
|
+
}
|
|
104
|
+
});
|
|
76
105
|
```
|
|
77
106
|
|
|
78
107
|
### 試したこと
|