質問編集履歴

1

正常に実装される別ページのコードを記載しました。

2021/01/18 02:47

投稿

mido0webdesign
mido0webdesign

スコア0

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