質問編集履歴

2

書き方を変更しました

2019/03/13 07:31

投稿

d1-fujii
d1-fujii

スコア10

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,28 @@
1
+ ### 前提・実現したいこと
2
+
3
+
4
+
1
5
  下記のscriptを768px 以下で動かしたいのですが追加スクリプトの書き方がよくわかりません。
2
6
 
3
7
 
4
8
 
9
+ ### 発生している問題・エラーメッセージ
10
+
11
+ スクロールした時に下記のスクリプトだとPCもSpも同じように動くのでSPにだけ設定したいのですが、上手く動かせません。
12
+
13
+
14
+
15
+ エラーメッセージ
16
+
17
+ ```
18
+
19
+
20
+
5
- ### スクリプト
21
+ ### 該当のソーコード
22
+
23
+
24
+
25
+ ```
6
26
 
7
27
  <script>
8
28
 
@@ -38,8 +58,6 @@
38
58
 
39
59
 
40
60
 
41
- ### HTML
42
-
43
61
  <div id="fh5co-header">
44
62
 
45
63
  <header id="fh5co-header-section">
@@ -94,9 +112,17 @@
94
112
 
95
113
 
96
114
 
115
+
116
+
117
+ ```
118
+
119
+
120
+
97
- ### 試した追加スクリプト
121
+ ### 試したこと
122
+
123
+
124
+
98
-
125
+ ```
99
-
100
126
 
101
127
  <script>
102
128
 
@@ -104,7 +130,7 @@
104
130
 
105
131
  var w = $(window).width();
106
132
 
107
- var x = 750;
133
+ var x = 768;
108
134
 
109
135
  if(w <= x)
110
136
 
@@ -146,7 +172,7 @@
146
172
 
147
173
    var w = $(window).width();
148
174
 
149
- var x = 750;
175
+ var x = 768;
150
176
 
151
177
  if(w <= x){
152
178
 
@@ -174,10 +200,12 @@
174
200
 
175
201
 
176
202
 
177
-
203
+ ```
204
+
205
+
206
+
178
-
207
+ ### 補足情報(FW/ツールのバージョンなど)
179
-
180
-
181
-
182
-
208
+
209
+
210
+
183
- ご教授宜しくお願致します
211
+ ここにより詳細な情報を記載ださい。

1

HTMLとやってみた追加コードを1つ記入しました。

2019/03/13 07:31

投稿

d1-fujii
d1-fujii

スコア10

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
-
5
+ ### スクリプト
6
6
 
7
7
  <script>
8
8
 
@@ -38,6 +38,142 @@
38
38
 
39
39
 
40
40
 
41
+ ### HTML
42
+
43
+ <div id="fh5co-header">
44
+
45
+ <header id="fh5co-header-section">
46
+
47
+ <div class="nav-header">
48
+
49
+ <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
50
+
51
+ <h1 id="fh5co-logo"><a href=“#”><img src="../images/logo.svg" ></a></h1>
52
+
53
+
54
+
55
+
56
+
57
+ <nav id="fh5co-menu-wrap" role="navigation">
58
+
59
+ <ul class="sf-menu" id="fh5co-primary-menu">
60
+
61
+ <li><a href="../about.html">About</a></li>
62
+
63
+ <li><a href=“../news.html">News</a></li>
64
+
65
+ <li><a href=“../access.html">Access</a></li>
66
+
67
+ <li><a href=“../event.html">Event</a></li>
68
+
69
+ </ul>
70
+
71
+ </nav>
72
+
73
+
74
+
75
+ </div><!-- end nav-heade -->
76
+
77
+
78
+
79
+ </header>
80
+
81
+
82
+
83
+ </div><!-- END fh5co-heade -->
84
+
85
+
86
+
87
+ <div id="contens">
88
+
89
+
90
+
91
+ </div>
92
+
93
+
94
+
95
+
96
+
97
+ ### 試した追加スクリプト
98
+
99
+
100
+
101
+ <script>
102
+
103
+ $(function(){
104
+
105
+ var w = $(window).width();
106
+
107
+ var x = 750;
108
+
109
+ if(w <= x)
110
+
111
+ {
112
+
113
+ var startPos = 0,winScrollTop = 0;
114
+
115
+ $(window).on('scroll',function(){
116
+
117
+ winScrollTop = $(this).scrollTop();
118
+
119
+ if (winScrollTop >= startPos) {
120
+
121
+ if(winScrollTop >= 50){
122
+
123
+ $('#fh5co-logo').addClass('hide');
124
+
125
+ }
126
+
127
+ } else {
128
+
129
+ $('#fh5co-logo').removeClass('hide');
130
+
131
+ }
132
+
133
+ startPos = winScrollTop;
134
+
135
+ });
136
+
137
+ </script>
138
+
139
+
140
+
141
+ <script>
142
+
143
+ var startPos = 0,winScrollTop = 0;
144
+
145
+ $(window).on('scroll',function(){
146
+
147
+   var w = $(window).width();
148
+
149
+ var x = 750;
150
+
151
+ if(w <= x){
152
+
153
+ winScrollTop = $(this).scrollTop();
154
+
155
+ if (winScrollTop >= startPos) {
156
+
157
+ if(winScrollTop >= 50){
158
+
159
+ $('#fh5co-logo').addClass('hide');
160
+
161
+ }
162
+
163
+ } else {
164
+
165
+ $('#fh5co-logo').removeClass('hide');
166
+
167
+ }
168
+
169
+ startPos = winScrollTop;
170
+
171
+ });
172
+
173
+ </script>
174
+
175
+
176
+
41
177
 
42
178
 
43
179