質問編集履歴

2

改善

2019/12/05 07:00

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- jsスクロールした時の挙動して
1
+ jsスクロールにかんして
test CHANGED
@@ -1,73 +1,29 @@
1
- 今、下記jsで一定の位置までスクロールした時に動きを付けるjsを作っています。
1
+ jQuery(function($){
2
2
 
3
- ただ下記だと、ページの一番下を見ている状態でも更新をすると動きが始まってしまいます。
3
+ 'use strict';
4
4
 
5
+ var inviewObserver = new IntersectionObserver(function(entries, observer){
5
6
 
7
+ entries.forEach(function(entry) {
6
8
 
7
- できればstartPointのところだと思うのですが、これをここより下の位置にいたらjs開始ではなく、
9
+ if (!entry.isIntersecting) return;
8
10
 
9
- ここからここまでの間にいたら、js開始というコードに変えたいのですが、どのようにやれば良いかが分かりません。
11
+ var $target = $(entry.target),
10
12
 
13
+ delay = 200;
11
14
 
15
+ if($target.hasClass('js-fv')){
12
16
 
13
- ```
17
+ delay = 800;
14
18
 
15
- $(window).on('scroll resize load',function(){
19
+ }
16
20
 
17
- scrolltop = $(window).scrollTop();
21
+ $target.delay(delay).queue(function() {
18
22
 
19
- windowHeight = $(window).height();
23
+ $target.addClass('is-inview').dequeue();
20
24
 
21
- startPoint = scrolltop + windowHeight - 100;
25
+ });
22
26
 
23
- if(startPoint > target){
27
+ observer.unobserve( entry.target );
24
28
 
25
- if(flg==false){
26
-
27
- mySVG.drawsvg('animate');
28
-
29
- flg = true;
30
-
31
- }
32
-
33
- }
34
-
35
- });
29
+ });
36
-
37
- ```
38
-
39
-
40
-
41
- やってみたこと。
42
-
43
- startPoint2というのを追加して、targetに挟んでみたのですがうまくいきませんでした。
44
-
45
-
46
-
47
- ```
48
-
49
- $(window).on('scroll resize load',function(){
50
-
51
- scrolltop = $(window).scrollTop();
52
-
53
- windowHeight = $(window).height();
54
-
55
- startPoint = scrolltop + windowHeight - 100;
56
-
57
- startPoint2 = startPoint + 500
58
-
59
- if(startPoint > target > startPoint2){
60
-
61
- if(flg==false){
62
-
63
- mySVG.drawsvg('animate');
64
-
65
- flg = true;
66
-
67
- }
68
-
69
- }
70
-
71
- });
72
-
73
- ```

1

改善

2019/12/05 07:00

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -56,7 +56,7 @@
56
56
 
57
57
  startPoint2 = startPoint + 500
58
58
 
59
- if(startPoint > target > startPoint2){
59
+ if(startPoint > target > startPoint2){
60
60
 
61
61
  if(flg==false){
62
62