脚本在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的底部被触发而不是顶部

回答

相关问题