jquery - 当 scrollTop 等于某物时,启动一个函数,但只启动一次

标签 jquery html css plugins

dif<=400该功能启动,但是当我继续滚动时,该功能继续并开始循环。我希望该功能只运行一次,但不是每次滚动时都运行。

代码:

$(window).scroll(function(){

 var scrl_height=$(window).scrollTop();
 var d_height=$(document).height();
 var dif=d_height - scrl_height;


 if(dif <= 400){

  $('.myStat2').circliful(1500).stop();

  $('#n75').animateNumber({ number: 75 },1500);
  $('#n100').animateNumber({ number: 100 },1500);
  $('#n57').animateNumber({ number: 57 },1500);
  $('#n87').animateNumber({ number: 87 },1500);
   
  }

})
.skll
{
 display: inline-block;
 height: 40px;
 width: 55px;
 margin-left: 10px;
}

#wd1{margin-left: -40px;}

.myStat2
{
 margin-left: 50px;
 margin-top: -114px;
}
<script type="text/javascript" src="js/jquery.circliful.min.js"></script>
<script type="text/javascript" src="js/jquery.animatenumber.min.js"></script>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor pellentesque odio in suscipit. Fusce posuere sapien neque, at tincidunt nisl ultrices id. Ut semper neque dui. Nunc volutpat diam vel risus tristique, at euismod ex dictum. Phasellus efficitur lectus nec felis venenatis dignissim. Vivamus sit amet ligula orci. Nulla tempus porttitor lectus, vel mattis ipsum vehicula rutrum. Nullam blandit venenatis nisl, in vulputate diam tincidunt vel. Sed aliquam tortor in dapibus aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean convallis enim vel mollis sollicitudin. Integer lectus metus, facilisis vitae tempor a, ornare sed felis. Donec fringilla nibh vel nulla tempus tempor faucibus id turpis.

Fusce maximus lobortis urna in feugiat. Praesent dui enim, mattis ac felis ac, tristique laoreet mi. Nam ac nisi et lectus lobortis lobortis. Pellentesque vel metus cursus, scelerisque orci at, malesuada mauris. Proin scelerisque molestie lacinia. Nunc sodales commodo purus, non imperdiet magna volutpat quis. Morbi nec sodales felis. Curabitur luctus sapien ante, a ullamcorper neque volutpat non. Quisque vestibulum ornare tellus quis elementum. Nam risus sem, dignissim quis bibendum at, condimentum sit amet nibh. Vivamus sodales ultricies purus, ac luctus ex molestie non. Sed pretium condimentum felis vel ullamcorper.

Proin fringilla elementum mollis. Morbi ornare mauris tortor, non fringilla augue gravida sit amet. Aliquam commodo consequat viverra. Pellentesque at accumsan metus. Ut consectetur ante sit amet pharetra consequat. Vivamus porta quam a magna imperdiet lobortis. Donec porta gravida erat nec accumsan. Duis euismod lorem dolor, quis mollis risus rutrum quis. Duis finibus convallis risus. Nullam placerat eu felis vitae euismod. Pellentesque quis sapien tellus. Nulla aliquam consequat pretium. Mauris viverra lacus ut urna pretium aliquet. Quisque non velit dolor.

Cras id maximus sapien. Nulla egestas dignissim nulla vel cursus. Aliquam imperdiet odio dolor. Suspendisse dictum est sit amet sem gravida ultricies. Nunc in tortor nunc. Sed sodales vehicula commodo. Vivamus consequat mi mi, nec interdum ipsum cursus a. Fusce venenatis semper vulputate. Phasellus euismod fringilla efficitur. Cras feugiat nunc convallis lacus ultrices, ut accumsan purus porttitor. Nullam est purus, hendrerit nec tortor in, faucibus bibendum turpis. Cras id massa a tellus varius auctor.

Pellentesque at posuere urna. Praesent nec urna sit amet elit pretium consectetur ac id lorem. Sed faucibus eros sed justo maximus lobortis. Integer eget mauris elit. Nullam volutpat libero sit amet elit feugiat, a suscipit enim auctor. Nulla aliquam orci sed ullamcorper condimentum. Curabitur tempor turpis ut urna posuere blandit. Morbi id libero vel enim facilisis gravida. Sed euismod venenatis lacus in ullamcorper. Nunc in finibus est, nec pulvinar purus. Morbi tristique dolor vitae ligula tincidunt, sit amet fringilla purus blandit. Proin accumsan neque ut lectus congue suscipit. Vivamus odio ipsum, porttitor ac ex id, consequat egestas augue.

 <ul class="sec">
   <li class="skll" id="wd1">
     <div class="numb" id="n75">0</div>
     <div class="myStat2" data-dimension="150" data-width="10" data-percent="75" data-fgcolor="#A8D164" data-bgcolor="#343434"></div>
   </li>

   <li class="skll">
     <div class="numb" id="n100">0</div>
     <div class="myStat2" data-dimension="150" data-width="10" data-percent="100" data-fgcolor="#FBCF61" data-bgcolor="#343434"></div>
   </li>

   <li class="skll">
     <div class="numb" id="n57">0</div>
     <div class="myStat2" data-dimension="150" data-width="10" data-percent="57" data-fgcolor="#FF6F6F" data-bgcolor="#343434"></div>
   </li>

   <li class="skll">
     <div class="numb" id="n87">0</div>
     <div class="myStat2" data-dimension="150" data-width="10" data-percent="87" data-fgcolor="#A8D164" data-bgcolor="#343434"></div>
   </li>
 </ul>

最佳答案

您需要在滚动函数范围之外定义一个变量,并将其用作标志来检查是否触发自定义逻辑,例如:

var checkScroll=true; /* <-- set the flag to check here */

$(window).scroll(function(){

 var scrl_height=$(window).scrollTop(),
    d_height=$(document).height(),
    dif=d_height - scrl_height;


 if(dif <= 400 && checkScroll){ /* <-- only run if the flag is true */
    $('.myStat2').circliful(1500).stop();
    $('#n75').animateNumber({ number: 75 },1500);
    $('#n100').animateNumber({ number: 100 },1500);
    $('#n57').animateNumber({ number: 57 },1500);
    $('#n87').animateNumber({ number: 87 },1500);
    checkScroll=false; /* <-- set the flag to false the first time, to prevent a second iteration */
  }

})

关于jquery - 当 scrollTop 等于某物时,启动一个函数,但只启动一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27690879/

相关文章:

javascript - jsPlumb setContainer方法不存在:“未捕获的TypeError:未定义不是函数”

jquery - &lt;input type ="file"/> 上的 .click() 在 Firefox 3.6 中不起作用 - 有什么解决方法吗?

javascript - 升级EaselJS后自定义光标不起作用

javascript - 添加多个用户jQuery

javascript - 调整窗口大小时,转换的元素不尊重 Firefox 上的绝对位置

javascript - 动态添加的选择列表中的问题

html - 职位:相对中断网页中的CSS不透明度

html - 无法将HTML表格彼此平行对齐

jquery - 创建图像叠加层

javascript - 如何观看/监听变量并触发 "onChange"事件(模块化 JS)