当您滚动到特定页面位置时,如何执行此操作,该功能将启动一次

How to do that when you scroll to a specific page position, function is started once?

本文关键字:操作 执行 功能 一次 启动 何执行 滚动 位置      更新时间:2023-09-26
如果我们

滚动到某个位置,scrl函数会触发另一个函数(页面中的元素移动ring函数)。但只有当我们再次滚动页面时,元素在完成后不会停止并将继续改变其位置,它是ring继续运行的功能。

  • 如何停止函数的执行?
  • 如何使该ring功能一次仅执行一次作为条件工作?
  • 如何编写一次触发函数的条件?

var h = document.documentElement.clientHeight,
  hh = parseInt($('.wrapdiv').css('height'));
function ring() {
  $('.ring').delay(500).animate({ //1
      left: 187,
    },
    800);
  $('.ring').delay(500).animate({ //2
      left: 300,
    },
    800);
  $('.ring').delay(500).animate({ //2.1
      left: 394,
    },
    800);
  $('.ring').animate({ //3
      left: 481,
      top: 100,
    },
    800);
};
function scrl() {
  var top = $(window).scrollTop();
  if (top > ((h + hh) / 2)) {
    ring();
  }
  
  
// Inside the function can be a lot of other functions and I need to stop only ring()
};
function myfoo() {
  $('.firstdiv').css('height', h);
};
$(window).scroll(scrl);
$(window).resize(myfoo);
$(document).ready(myfoo);
.parentring {
  display: block;
  position: relative;
  width: 1050px;
  height: 800px;
  margin: 0 auto;
}
.ring {
  display: block;
  position: absolute;
  top: 0px;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #DCDCDC;
  border: 4px solid #F1F1F1;
  left: 87px;
  box-shadow: 0 0 2px #006492, inset 0 0 7px #153F53;
}
.wrapdiv {
  display: block;
  position: relative;
  overflow: hidden;
  height: 244px;
  background: #CE93D8;
  color: #fff;
  padding: 0 25px;
}
.firstdiv {
  background: #FFB74D;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="firstdiv"></div>
<div class="wrapdiv">Значимость этих проблем настолько очевидна, что укрепление и развитие структуры влечет за собой процесс внедрения и модернизации систем массового участия. Идейные соображения высшего порядка, а также постоянный количественный рост и сфера нашей активности
  обеспечивает широкому кругу (специалистов) участие в формировании новых предложений. Идейные соображения высшего порядка, а также новая модель организационной деятельности представляет собой интересный эксперимент проверки систем массового участия.
 зации соответствующий условий активизации. Идейные соображения высшего порядка, а также укрепление и развитие структуры позволяет оценить значение новых предложений. Равным образом укрепление и развитие структуры требуют
  от нас анализа системы обучения кадров, соответствует насущным потребностям. С другой стороны дальнейшее развитие различных форм деятельности способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Не следует,
  однако забывать, что сложившаяся структура организации позволяет оценить значение дальнейших направлений развития. Товарищи! консультация с широким активом позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным
  образом рамки и место обучения кадров позволяет оценить значение системы обучения кадров, соответствует насущным потребностям.
</div>
<div class="parentring">
  <div class="ring"></div>
</div>

首先,您应该在加载 DOM 树后访问 DOM 元素。
将所有元素"选择"操作(通过id或其他选择器获取)放入$(document).ready(function(){ ... })函数中(对于纯Javascript - 放入window.onload = function(){ ... })。
为了防止函数内重复执行ring()函数scrl请使用一些全局变量或函数对象静态属性(以指示是否执行了ring函数)。我更喜欢第二种方法:

function scrl() {
  var top = $(window).scrollTop();
  if (!scrl.wasRinged && top > ((h + hh) / 2)) {
    ring();
    scrl.wasRinged = true;
  }
  ...
}
scrl.wasRinged = false;  // defining static property on function object