jquery counterが機能しません

Question

私のサイトには、ページを読み込むとカウントアップするカウンタが2つあります。しかし、私の画面が800px幅以下になると。ページを読み込むと自動的には起動しません。

しかし、実際にすばやくスクロールすると、サイトに配置されます。彼らは始まります。フルスクリーンでもうまく動作します。また、携帯電話でも動作します。ここで

はjqueryのコードです：

if (jQuery('.shortcode_counter').size() > 0) { 
    if (jQuery(window).width() > 760) { 
     jQuery('.shortcode_counter').each(function(){ 
      if (jQuery(this).offset().top < jQuery(window).height()) { 
       if (!jQuery(this).hasClass('done')) { 
        var set_count = jQuery(this).find('.stat_count').attr('data-count'); 
        jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) { 
          var data = Math.floor(now); 
          jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data); 
         } 
        }); 
        jQuery(this).addClass('done'); 
        jQuery(this).find('.stat_count'); 
       } 
      } else { 
       jQuery(this).waypoint(function(){ 
        if (!jQuery(this).hasClass('done')) { 
         var set_count = jQuery(this).find('.stat_count').attr('data-count'); 
         jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) { 
           var data = Math.floor(now); 
           jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data); 
          } 
         }); 
         jQuery(this).addClass('done'); 
         jQuery(this).find('.stat_count'); 
        } 
       },{offset: 'bottom-in-view'}); 
      } 
     }); 
    } 
} 

私はjQueryを使って素晴らしいではありませんよ。これは私が試してみましたjqueryのコードです：

• if (jQuery(window).width() > 760) { if (jQuery(window).width() > 0) {にBecouseの分screenwidhtはそれかもしれませんか？
• if (!jQuery(this).hasClass('done')) {このif文を完全に削除しました。私はそれがクラスか何かを適用したと思った。ここで

HTMLです：

<div class="row"> 
    <div class="col-sm-6 module_number_5 module_cont pb50 module_counter"> 
     <div class="module_content shortcode_counter breedte-100"> 
      <div class="counter_wrapper"> 
       <div class="counter_content"> 
        <div class="stat_count_wrapper"> 
         <h1 class="stat_count speciale-grote-counter" data-count="{{ records[1].number }}">0</h1> 
        </div> 
        <div class="counter_body"> 
         <h5 class="counter_title speciale-grote-counter-text">{{ records[1].year }}</h5> 
        <div class="stat_temp"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

私はこの1つ上の見当もつかない。だから私はここに投稿すると思った。その間、私はこれを解決しようとしています。

誰かがこれに対する解決を知っていれば。お願いします。

ありがとうございます！ハッピーコーディング。

ADITION：

JSFIDDLEは作業jsfiddleを追加しました。問題はです。私のエラーは、カウンタが最初に画面にないときにのみ発生します。 800px幅以下JSFIDDLEでは常に画面に表示されます。

アジテーション2：

Iveはこの正確な行を見つけました。 ：

jQuery(this).waypoint(function(){ 

},{offset: 'bottom-in-view'}); 

ADITION 3：

はApparantly Iが発見いくつかの他の行が問題でした。私は下の回答でそれを置くが、病気にもここに含まれている：

削除された：

jQuery(this).waypoint(function(){ 

},{offset: 'bottom-in-view'}); 

は今完全に正常に動作します。

Answer 1

「私のエラーは、カウンタが最初に画面に表示されていないときにのみ発生します。「

しかし、あなたが探していたものを、このです：

https://jsfiddle.net/9q0eLvs1/3/

私が変更さ唯一の事は、この行だった：

さらにもっと

if (jQuery(window).width() > 260) { 

、あなたが必要としない場合width()これを削除すると、コードは次のようになります。

if (jQuery('.shortcode_counter').size() > 0) { 

      jQuery('.shortcode_counter').each(function(){ 
       if (jQuery(this).offset().top < jQuery(window).height()) { 
        if (!jQuery(this).hasClass('done')) { 
         var set_count = jQuery(this).find('.stat_count').attr('data-count'); 
         jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) { 
           var data = Math.floor(now); 
           jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data); 
          } 
         }); 
         jQuery(this).addClass('done'); 
         jQuery(this).find('.stat_count'); 
        } 
       } else { 
        jQuery(this).waypoint(function(){ 
         if (!jQuery(this).hasClass('done')) { 
          var set_count = jQuery(this).find('.stat_count').attr('data-count'); 
          jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) { 
            var data = Math.floor(now); 
            jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data); 
           } 
          }); 
          jQuery(this).addClass('done'); 
          jQuery(this).find('.stat_count'); 
         } 
        },{offset: 'bottom-in-view'}); 
       } 
      }); 

    } 

ここで

幅（）シナリオなしFIDDLEです：

https://jsfiddle.net/9q0eLvs1/4/

Answer 2

Apparantlyそれは、この関数であった：

jQuery(this).waypoint(function(){ 

},{offset: 'bottom-in-view'}); 

アイブ氏は、行を削除し、それが再び完全に正常に動作します。