回答編集履歴
2
\.stop\(\)挿入
test
CHANGED
|
@@ -11,6 +11,14 @@
|
|
|
11
11
|
安全なプログラムにしました。
|
|
12
12
|
|
|
13
13
|
コンテンツが少なくページ全体が短いと、非表示、表示、非表示になってチカチカするようですよ。
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
修正
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
.stop()を入れて、fadeIn/fadeOut中に新たにfadeIn/fadeOutしようとすると前のfadeIn/fadeOutを中止するようにしました。
|
|
14
22
|
|
|
15
23
|
```JavaScript
|
|
16
24
|
|
|
@@ -34,6 +42,8 @@
|
|
|
34
42
|
|
|
35
43
|
var currentPos = $(this).scrollTop();
|
|
36
44
|
|
|
45
|
+
console.log(currentPos);
|
|
46
|
+
|
|
37
47
|
// 正：下方向／負：上方向
|
|
38
48
|
|
|
39
49
|
var direction = currentPos - previousPos;
|
|
@@ -46,7 +56,7 @@
|
|
|
46
56
|
|
|
47
57
|
if (! shown && conditionIfShow) {
|
|
48
58
|
|
|
49
|
-
topBtn.fadeIn();
|
|
59
|
+
topBtn.stop().fadeIn();
|
|
50
60
|
|
|
51
61
|
shown = true;
|
|
52
62
|
|
|
@@ -54,7 +64,7 @@
|
|
|
54
64
|
|
|
55
65
|
} else if (shown && ! conditionIfShow) {
|
|
56
66
|
|
|
57
|
-
topBtn.fadeOut();
|
|
67
|
+
topBtn.stop().fadeOut();
|
|
58
68
|
|
|
59
69
|
shown = false;
|
|
60
70
|
|
1
安全なプログラムに
test
CHANGED
|
@@ -1,20 +1,32 @@
|
|
|
1
1
|
完成イメージがわかりにくかったのですが、こういうことでしょうか？
|
|
2
2
|
|
|
3
3
|
fadeIn/fadeOutを切り替えるタイミングの判定が良くないようです。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
修正
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
安全なプログラムにしました。
|
|
12
|
+
|
|
13
|
+
コンテンツが少なくページ全体が短いと、非表示、表示、非表示になってチカチカするようですよ。
|
|
4
14
|
|
|
5
15
|
```JavaScript
|
|
6
16
|
|
|
7
17
|
$(function() {
|
|
8
18
|
|
|
9
|
-
|
|
19
|
+
// topボタンスクール上下の表示、非表示
|
|
10
|
-
|
|
11
|
-
var topBtn = $('#top-btn');
|
|
12
|
-
|
|
13
|
-
topBtn.hide();
|
|
14
20
|
|
|
15
21
|
var height = 500;
|
|
16
22
|
|
|
23
|
+
var topBtn = $('#top-btn').hide();
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
17
|
-
var shown = false;
|
|
27
|
+
var shown = false; // 現在の表示状態
|
|
28
|
+
|
|
29
|
+
var previousPos = 0;
|
|
18
30
|
|
|
19
31
|
|
|
20
32
|
|
|
@@ -22,9 +34,25 @@
|
|
|
22
34
|
|
|
23
35
|
var currentPos = $(this).scrollTop();
|
|
24
36
|
|
|
37
|
+
// 正：下方向／負：上方向
|
|
38
|
+
|
|
39
|
+
var direction = currentPos - previousPos;
|
|
40
|
+
|
|
41
|
+
// 表示条件
|
|
42
|
+
|
|
43
|
+
var conditionIfShow = (direction <= 0 && currentPos >= height);
|
|
25
44
|
|
|
26
45
|
|
|
46
|
+
|
|
27
|
-
if (shown && c
|
|
47
|
+
if (! shown && conditionIfShow) {
|
|
48
|
+
|
|
49
|
+
topBtn.fadeIn();
|
|
50
|
+
|
|
51
|
+
shown = true;
|
|
52
|
+
|
|
53
|
+
console.log('表示');
|
|
54
|
+
|
|
55
|
+
} else if (shown && ! conditionIfShow) {
|
|
28
56
|
|
|
29
57
|
topBtn.fadeOut();
|
|
30
58
|
|
|
@@ -32,15 +60,11 @@
|
|
|
32
60
|
|
|
33
61
|
console.log('非表示');
|
|
34
62
|
|
|
35
|
-
}
|
|
63
|
+
}
|
|
36
64
|
|
|
37
|
-
topBtn.fadeIn();
|
|
38
65
|
|
|
39
|
-
shown = true;
|
|
40
66
|
|
|
41
|
-
|
|
67
|
+
previousPos = currentPos;
|
|
42
|
-
|
|
43
|
-
}
|
|
44
68
|
|
|
45
69
|
});
|
|
46
70
|
|