腳本在div的底部被觸發而不是頂部

我想創建一個向上計數的腳本，當我到達特定的div時觸發，而不是當它達到div的頂部時它會在觸發底部時啓動，爲什麼所以？腳本在div的底部被觸發而不是頂部

我的html：

<div id="status_counter" class="status_bar"> 
    <div class="container text-center"> 
     <div class="row"> 
      <div class="col-sm-3"> 
       <div class="counter-item"> 
        <h2><div class="counter" data-count="33">0</div></h2> 

       </div> 
      </div> 
      <div class="col-sm-3"> 
       <div class="counter-item"> 
        <h2><div class="counter" data-count="25">0</div></h2>!- 

       </div> 
      </div> 
      <div class="col-sm-3"> 
       <div class="counter-item"> 
        <h2><div class="counter" data-count="15">0</div></h2> 

       </div> 
      </div> 
      <div class="col-sm-3"> 
       <div class="counter-item"> 
        <h2><div class="counter" data-count="42">0</div></h2> 

       </div> 
      </div> 
     </div> 
    </div> 
</div>

我counter.js：

var eventFired = false, 
    objectPositionTop = $('#status_counter').offset().top; 

$(window).on('scroll', function() { 

var currentPosition = $(document).scrollTop(); 
if (currentPosition > objectPositionTop && eventFired === false) { 
    eventFired = true; 


    $('.counter').each(function() { 
     var $this = $(this), 
      countTo = $this.attr('data-count'); 

     $({ countNum: $this.text()}).animate({ 
     countNum: countTo 
     }, 

     { 

     duration: 2000, 
     easing:'linear', 
     step: function() { 
      $this.text(Math.floor(this.countNum)); 
     }, 
     complete: function() { 
      $this.text(this.countNum); 
      //alert('finished'); 
     } 

     }); 



    }); 




} 

});

目前：當向下滾動到status_counter它不觸發我的劇本，直到我向下滾動到它的底部。

我希望當我的屏幕上出現status_counter div時觸發Count的腳本，所以當status_counter div的頂部/開始到達屏幕的底部時。

來源

2016-11-13 mheonyae

如果我理解過程rstand你的問題以及這應該工作：

var eventFired = false, 
    objectPositionTop = $('#status_counter').offset().top, 
    objectPositionBottom = objectPositionTop; 

$(window).on('scroll', function() { 
    var currentPositionBottom = $(document).scrollTop() + $(window).height(); 

    if (currentPositionBottom > objectPositionBottom && eventFired === false) { 
     eventFired = true; 

     $('.counter').each(function() { 
      var $this = $(this), 
      countTo = $this.attr('data-count'); 

      $({countNum: $this.text()}).animate({ 
       countNum: countTo 
      }, { 
       duration: 2000, 
       easing:'linear', 
       step: function() { 
       $this.text(Math.floor(this.countNum)); 
      }, complete: function() { 
       $this.text(this.countNum);   
      } 
      }); 
     }); 
    } 
});

來源

2016-11-13 15:25:12

您需要檢查的元素的底部位置VS窗口的底部位置（這是scrollHeight屬性+窗口的高度）：

objectPositionTop = $('#status_counter').offset().top; 
objectPositionBottom = objectPositionTop + $('#status_counter').height();

而且裏面的scroll可以使用：

var currentPositionBottom = $(document).scrollTop() + $(window).height(); 
if (currentPositionBottom > objectPositionBottom && eventFired === false) {

這裏是你的代碼的一個分支：
https://jsfiddle.net/rop0g9gz/1/

來源

2016-11-13 14:26:56 Dekel

爲什麼底部的元素？我希望它在元素頂端（#status_counter）到達窗口底部時立即啓動，一旦它出現在屏幕上以開始加載數字 – mheonyae

您說當前代碼適用於元素的頂部。如果您想將其更改爲元素的底部 - 此代碼就是您要查找的內容。如果情況並非如此 - 請更新問題。 – Dekel

不，我說它工作的方式，所以它被觸發在div的底部而不是頂部。在我的帖子結尾，我問到底是什麼讓它觸發，因爲我想知道錯誤... – mheonyae

趕上div你想你的時候算過它：

var exampleDiv = document.getElementById("#YOUR-DIV-ID")

並將其連接到mouseover事件：

exampleDiv.addEventListener('mouseover' , your-count-function)

來源

2016-11-13 15:36:25

腳本在div的底部被觸發而不是頂部

回答

相關問題