質問編集履歴
2
回答いただいた内容を元に、新しいスクリプトを追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -84,4 +84,62 @@
|
|
|
84
84
|
|
|
85
85
|
スクロール中もスクロール量の値は随時変動しているのは見れたのですが、.color_のクラスが付与、切り替わるタイミングは、スクロールが止まった時に「300で割り切れた場合のみ」でした。要は、自分が書いているスクリプトが「スクロールが止まった時点で行われる」ということは認識しております。
|
|
86
86
|
|
|
87
|
-
なので、リアルタイムにそれを処理する方法があるのかと思い、その解決策があればご教示いただきたい次第です。
|
|
87
|
+
なので、リアルタイムにそれを処理する方法があるのかと思い、その解決策があればご教示いただきたい次第です。
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
●追記 21/09/24 09:24
|
|
91
|
+
m.ts10806さんにご教示いただいた内容を元に、「直前のscrollTopの位置」と「現在のスクロールの位置」を比較して、上下の判定を行い、カウントをアップ/ダウンさせるスクリプトを書いてみました。
|
|
92
|
+
|
|
93
|
+
```javascript
|
|
94
|
+
var posBefore;
|
|
95
|
+
var posAfter;
|
|
96
|
+
var current;
|
|
97
|
+
var count = 1;
|
|
98
|
+
var color = 1;
|
|
99
|
+
|
|
100
|
+
posBefore = $(window).scrollTop();
|
|
101
|
+
|
|
102
|
+
$(document).on("scroll",$(window),function(){
|
|
103
|
+
posAfter = $(this).scrollTop();
|
|
104
|
+
|
|
105
|
+
// スクロール開始位置がスクロール後より大きい
|
|
106
|
+
if (posAfter < posBefore) {
|
|
107
|
+
console.log('うえ'); /* チェック用 */
|
|
108
|
+
current = (posAfter * 300);
|
|
109
|
+
|
|
110
|
+
if (color > 1) {
|
|
111
|
+
$('#logo').removeClass().addClass('color_' + color);
|
|
112
|
+
color--;
|
|
113
|
+
}
|
|
114
|
+
else if(color == 1) {
|
|
115
|
+
$('#logo').removeClass().addClass('color_' + color);
|
|
116
|
+
color=7;
|
|
117
|
+
}
|
|
118
|
+
// スクロール開始位置がスクロール後より小さい
|
|
119
|
+
}else{
|
|
120
|
+
console.log('した'); /* チェック用 */
|
|
121
|
+
current = (posAfter * 300);
|
|
122
|
+
|
|
123
|
+
if (color < 7) {
|
|
124
|
+
$('#logo').removeClass().addClass('color_' + color);
|
|
125
|
+
color++;
|
|
126
|
+
}
|
|
127
|
+
else if(color == 7) {
|
|
128
|
+
$('#logo').removeClass().addClass('color_' + color);
|
|
129
|
+
color=1;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
//開始位置をスクロール後の位置に書き換える
|
|
135
|
+
posBefore = posAfter;
|
|
136
|
+
});
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
ただし、ご教示いただいた内容のうち、以下部分が理解できておらず、
|
|
140
|
+
|
|
141
|
+
```javascript
|
|
142
|
+
current = (count * 300);
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
上下にスクロールさせる際、スクロール量の増減、color_の増減は出来ているっぽいのですが、300pxごとの変化が出来ず、もっと狭いスパンでcolor_の値が変化していってる状態でした。。
|
1
確認方法について追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -69,4 +69,19 @@
|
|
|
69
69
|
|
|
70
70
|
|
|
71
71
|
これをどう解決すればいいのか、ご教示いただけると幸いです。
|
|
72
|
-
よろしくお願いいたします。
|
|
72
|
+
よろしくお願いいたします。
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
●追記
|
|
76
|
+
|
|
77
|
+
上記の確認方法についてですが、
|
|
78
|
+
|
|
79
|
+
・chomeで上記コードを記述したページを表示
|
|
80
|
+
・Windows環境で、F12ボタン→開発者ツールを開いてコードが変わる様子を監視
|
|
81
|
+
・スクリプトに、$('p').text(scroll); を追加して、スクロール量を画面にリアルタイムで表示させるようにした
|
|
82
|
+
|
|
83
|
+
という環境でおこないました。
|
|
84
|
+
|
|
85
|
+
スクロール中もスクロール量の値は随時変動しているのは見れたのですが、.color_のクラスが付与、切り替わるタイミングは、スクロールが止まった時に「300で割り切れた場合のみ」でした。要は、自分が書いているスクリプトが「スクロールが止まった時点で行われる」ということは認識しております。
|
|
86
|
+
|
|
87
|
+
なので、リアルタイムにそれを処理する方法があるのかと思い、その解決策があればご教示いただきたい次第です。
|