teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

色々と修正

2016/12/19 00:39

投稿

nobinobi
nobinobi

スコア199

answer CHANGED
@@ -29,11 +29,24 @@
29
29
  ---
30
30
  追記
31
31
  ```
32
+ <!--topボタンスクール上下の表示、非表示-->
33
+ var topBtn = $('#top-btn');
34
+ topBtn.hide();
35
+ var startPos = 0;
32
36
  $(window).scroll(function(){
33
37
  var currentPos = $(this).scrollTop();
38
+
34
39
  //スクロールした時
35
40
  console.log(currentPos+' > '+startPos);
41
+
36
- //スクロールした時且つスクロール量が500の時:topBtn.fadeIn();としていた判定
42
+ //スクロールした時且つスクロール量が500の時:topBtn.fadeOut();としていた判定
37
43
  console.log($(window).scrollTop()+' < 500');
44
+
45
+ if(currentPos > startPos || $(window).scrollTop() < 500){
46
+ topBtn.fadeOut();
47
+ } else {
48
+ topBtn.fadeIn();
49
+ }
50
+ startPos = currentPos;
38
51
  });
39
52
  ```

2

追記

2016/12/19 00:39

投稿

nobinobi
nobinobi

スコア199

answer CHANGED
@@ -24,4 +24,16 @@
24
24
  単純なことですので一行ずつconsole.logで確認して頂ければ分かるかと。
25
25
 
26
26
  まずは「点滅」という”動作”とはどうしたら出来るのかを考えてみてください。
27
- それが分かればあとは調整だけかと思います。
27
+ それが分かればあとは調整だけかと思います。
28
+
29
+ ---
30
+ 追記
31
+ ```
32
+ $(window).scroll(function(){
33
+ var currentPos = $(this).scrollTop();
34
+ //スクロールした時
35
+ console.log(currentPos+' > '+startPos);
36
+ //スクロールした時且つスクロール量が500の時:topBtn.fadeIn();としていた判定
37
+ console.log($(window).scrollTop()+' < 500');
38
+ });
39
+ ```

1

追記

2016/12/19 00:30

投稿

nobinobi
nobinobi

スコア199

answer CHANGED
@@ -1,2 +1,27 @@
1
1
  当方iPhone6sですが、「http://jikkyo-webdesigner.top/」では点滅、「http://qiita.com/tonkotsuboy_com/items/d32ec6e7a1f6f592d415 」ではアラート出ずで問題ありませんでした。
2
- 処理を見直されてはいかがでしょう。
2
+ 処理を見直されてはいかがでしょう。
3
+
4
+ ---
5
+ 追記
6
+
7
+ ```
8
+ $(window).scroll(function(){
9
+ var currentPos = $(this).scrollTop();
10
+ if(currentPos > startPos){
11
+ topBtn.fadeOut();
12
+ } else {
13
+ if($(window).scrollTop() < 500){
14
+ topBtn.fadeOut();
15
+ } else {
16
+ topBtn.fadeIn();
17
+ }
18
+ }
19
+ startPos = currentPos;
20
+ });
21
+ ```
22
+
23
+ 上記部分を変更したところ、スクロール量500未満時非表示、それ以外は点滅せず常時表示となりました。
24
+ 単純なことですので一行ずつconsole.logで確認して頂ければ分かるかと。
25
+
26
+ まずは「点滅」という”動作”とはどうしたら出来るのかを考えてみてください。
27
+ それが分かればあとは調整だけかと思います。