質問編集履歴
1
正常に実装される別ページのコードを記載しました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -70,6 +70,24 @@
|
|
70
70
|
|
71
71
|
|
72
72
|
|
73
|
+
---別ページのhtml---
|
74
|
+
|
75
|
+
<div class="contact-top big-bg" id="contact-top">
|
76
|
+
|
77
|
+
<header>
|
78
|
+
|
79
|
+
<div class="header-wrapper">
|
80
|
+
|
81
|
+
...
|
82
|
+
|
83
|
+
</div>
|
84
|
+
|
85
|
+
</header>
|
86
|
+
|
87
|
+
</div>
|
88
|
+
|
89
|
+
|
90
|
+
|
73
91
|
```
|
74
92
|
|
75
93
|
|
@@ -124,6 +142,26 @@
|
|
124
142
|
|
125
143
|
|
126
144
|
|
145
|
+
---別ページのcss---
|
146
|
+
|
147
|
+
.contact-top {
|
148
|
+
|
149
|
+
background-image: url(../images/contact-page-bgi@2x.jpg);
|
150
|
+
|
151
|
+
height: 40vw;
|
152
|
+
|
153
|
+
position: relative;
|
154
|
+
|
155
|
+
}
|
156
|
+
|
157
|
+
.header-bg {
|
158
|
+
|
159
|
+
background-color: #282F35; transition: all .1s;
|
160
|
+
|
161
|
+
}
|
162
|
+
|
163
|
+
|
164
|
+
|
127
165
|
```
|
128
166
|
|
129
167
|
|
@@ -148,6 +186,26 @@
|
|
148
186
|
|
149
187
|
});
|
150
188
|
|
189
|
+
|
190
|
+
|
191
|
+
---別ページのjQuery---
|
192
|
+
|
193
|
+
$(window).on('load scroll',function() {
|
194
|
+
|
195
|
+
var contactTopHeight = $('#contact-top').outerHeight();
|
196
|
+
|
197
|
+
var scroll = $(this).scrollTop();
|
198
|
+
|
199
|
+
if(scroll > contactTopHeight) {
|
200
|
+
|
201
|
+
$('header').addClass('header-bg');
|
202
|
+
|
203
|
+
} else { $('header').removeClass('header-bg');
|
204
|
+
|
205
|
+
}
|
206
|
+
|
207
|
+
});
|
208
|
+
|
151
209
|
```
|
152
210
|
|
153
211
|
|