質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

19050閲覧

ページスクロールで要素が近くに来たらカウントアップさせたい

melRel

総合スコア12

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/11/08 13:01

編集2018/11/09 10:39

ページ内にある複数の要素を、カウントアップして指定の数値に来たらストップさせるものを作ったのですが、
ページスクロールで要素が近くに来たらカウントアップをスタートさせるように書き換えたところ、
カウントアップしている数字の表示がおかしくなり、
一瞬カウントダウンしてまたカウントアップしたりするようになってしまいました。

正常にカウントアップさせるにはどのようにしたらいいのか、ご教授お願いします。

html

1<div class="count count-slow" data-num="80">00</div> 2<div class="count count-fast" data-num="20">00</div> 3<div class="count count-slow" data-num="99">00</div> 4<div class="count count-fast" data-num="8">0</div> 5<div class="count count-slow" data-num="5">0</div> 6<div class="count count-fast" data-num="40">00</div>

jQuery

1$(window).on('load scroll', function(){ 2 $('.count').each(function(){ 3 var self = $(this), 4 thisPosition = self.offset().top, 5 scroll = $(window).scrollTop(), 6 windowHeight = $(window).height(), 7 countMax = self.attr('data-num'), 8 thisCount = self.text(), 9 countTimer; 10 11 12 if (scroll >= thisPosition - windowHeight + windowHeight / 5){ 13 if (self.hasClass('count-slow')) { 14 var countSpeed = 600; 15 } else if (self.hasClass('count-fast')) { 16 var countSpeed = 30; 17 } 18 19 function timer(){ 20 countTimer = setInterval(function(){ 21 var countNext = thisCount++, 22 addZero = ('0' + countNext).slice(-2); 23 24 if (countMax > 10 && countNext < 10) { 25 self.text(addZero); 26 } else { 27 self.text(countNext); 28 } 29 30 if (countNext == countMax){ 31 clearInterval(countTimer); 32 } 33 }, countSpeed); 34 } 35 timer(); 36 } 37 }); 38});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

質問文にあるコードでは、ページ読込直後にのみ、カウントアップを行うかどうかの判定処理を行っています。これでは、画面をスクロールしても正常に動作しません。

ページスクロールにより要素が近くに来たときに処理を行いたいのであれば、ページのスクロールを検出する必要があります。jQueryには、スクロールが行われたときの処理を登録できるscroll()というメソッドがあるので、これを使うと良いでしょう。

scroll()は、以下のように使います。

JavaScript

1$(window).scroll(function(){ 2 //画面内でスクロール位置が変化したときに呼び出される 3});

今回の場合、scroll()を用いた以下のコードでやりたいことが実現できます。

JavaScript

1//$count要素のカウントアップを開始する 2//$count: jQueryオブジェクト 3function launchCountUp($count){ 4 5 var countMax = $count.attr('data-num'); 6 var thisCount = $count.text(); 7 var countTimer; 8 9 if ($count.hasClass('count-slow')){ 10 var countSpeed = 600; 11 }else if($count.hasClass('count-fast')){ 12 var countSpeed = 30; 13 } 14 15 function timer(){ 16 countTimer = setInterval(function(){ 17 var countNext = thisCount++; 18 var addZero = ('0' + countNext).slice(-2); 19 20 if (countMax > 10 && countNext < 10) { 21 $count.text(addZero); 22 } else { 23 $count.text(countNext); 24 } 25 26 if (countNext == countMax){ 27 clearInterval(countTimer); 28 } 29 }, countSpeed); 30 } 31 32 timer(); 33} 34 35//要素が画面にあるか確認し、あればカウントアップ処理を開始する 36//$counts: jQueryオブジェクト 37function detectCountElement($counts){ 38 39 $.each($counts, function(i, countElement){ 40 var $count = $(countElement); 41 42 //既にカウントアップが行われている場合、何もしない 43 if($count.attr("data-isLaunched")){ 44 return; 45 } 46 47 //スクロール量・画面の高さを取得する 48 var $window = $(window); 49 var scrollTop = $window.scrollTop(); 50 var windowHeight = $window.innerHeight(); 51 52 //要素の座標を取得する 53 var offset = $count.offset(); 54 55 //要素が画面内にあるか確認する 56 if(scrollTop < offset.top && offset.top < scrollTop + windowHeight){ 57 //要素のカウントアップを開始する 58 launchCountUp($count); 59 //要素にデータを付与し、カウントアップが行われたことが分かるようにする 60 $count.attr("data-isLaunched", true); 61 } 62 63 }); 64 65} 66 67 68$(function(){ 69 70 //<div class="count">要素を取得する 71 var $counts = $(".count"); 72 73 //ページ読込直後に、画面内に<div class="count">があれば、 74 //それらのカウントアップを開始する 75 detectCountElement($counts); 76 77 //スクロール後に、画面内に<div class="count">があれば、 78 //それらのカウントアップを開始する 79 $(window).scroll(detectCountElement.bind(window, $counts)); 80 81});

投稿2018/11/09 10:28

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

melRel

2018/11/09 10:45

回答ありがとうございます! 質問に書いたjQueryの部分のスクロールの記述が抜けておりました。失礼いたしました。 回答いただいた内容で書き換えたところ正常にカウントアップするようになりました。 それぞれの処理のところに詳しくコメントも書いてくださっていて、 とても勉強になりました。ありがとうございました!
退会済みユーザー

退会済みユーザー

2018/11/09 10:57

当初提示していたコードは、イベントの内部部分だったのですね... 更新していただいたコードが正常に動かない理由は、スクロールイベントが起きるたびに、timer()が呼び出されているためと思われます。元々のコードでも、カウントアップが開始しているか判定し、開始されていた場合はtimer()を実行しないようにすれば、動くようになると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問