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

回答編集履歴

1

修正

2017/07/20 08:46

投稿

退会済みユーザー
answer CHANGED
@@ -3,14 +3,23 @@
3
3
  また、フェードイン・アウトの処理を行う際、上下スクロールを高速で行うと、その回数分フェードイン・アウトが走ってしまい、要素が明滅する感じになるので、アニメーションを止めるstopを追加し、余計なアニメーションを停止させるようにしてください。
4
4
 
5
5
  ``` css
6
+ @media all and (min-width: 481px) {
6
- #contact_fixed_sp {
7
+ #contact_fixed_sp {
7
- display: none;
8
+ display: none;
9
+ }
8
10
  }
9
11
 
10
- @media all and (min-width: 480px) {
12
+ @media all and (max-width: 480px) {
11
13
  #contact_fixed_sp {
12
14
  display: none;
15
+ position: fixed;
16
+ right: 0;
17
+ top: 0;
13
18
  }
19
+
20
+ #contact_fixed_sp.show {
21
+ display: inline-block;
22
+ }
14
23
  }
15
24
  ```
16
25
 
@@ -23,12 +32,20 @@
23
32
  if ($(window).scrollTop() > distanceTop) {
24
33
  $contactFixedSp
25
34
  .stop()
26
- .fadeIn("slow");
35
+ .fadeIn("slow", function () {
36
+ $(this)
37
+ .css({ display: '', opacity: '', })
38
+ .addClass('show');
39
+ });
27
40
  }
28
41
  else {
29
42
  $contactFixedSp
30
43
  .stop()
31
- .fadeOut("slow");
44
+ .fadeOut("slow", function () {
45
+ $(this)
46
+ .css({ display: '', opacity: '', })
47
+ .removeClass('show');
48
+ });
32
49
  }
33
50
  })
34
51
  .trigger('scroll');