代码之家 › 专栏 › 技术社区 › miss.emenems

仅当元素到达窗口顶部时调用函数一次

scrolltop scroll jquery javascript

miss.emenems · 技术社区 · 6 年前

我正在尝试调用函数 myFunction 当其中一个元素 #checkPosition 点击窗口顶部,但因为我必须使用 $(window).scroll() 检测动作(滚动)并在某个点上滚动 totalScroll 始终大于此元素到顶部的距离 indicatorPosition ,函数被多次调用。

如何仅调用此函数一次?

HTML:

<div class="section section--1">
    <p>Section 1</p>
</div>
<div class="section section--2">
    <p>Section 2</p>
    <div id="checkPosition" class="indicator">Check position</div>
    <div id="targetElement" class="target">Target: </div>
</div>

CSS(只是为了获得一些高度):

.section {
   min-height: 1000px;
}

JS公司:

const indicatorPosition = $('#checkPosition').offset().top;
console.log("indicators initial position:", indicatorPosition);

var myFunction = function(){
  $('#targetElement').append('new text goes here only once. ');
  console.log("call me only once");
}

$(window).scroll(function(){
    var totalScroll = $(window).scrollTop();
    if (totalScroll > indicatorPosition) {
      myFunction();
    }
});

1 回复 | 直到 6 年前

Abslen Char 6 年前

一种方法是使用变量并在调用函数时递增,然后检查值是否已更改,以查看函数是否在调用之前已被调用

let indicatorPosition = $('#checkPosition').offset().top;
console.log("indicators initial position:", indicatorPosition);

var myFunction = function(){
  $('#targetElement').append('new text goes here only once. ');
  console.log("call me only once");
}
let check = 1
$(window).scroll(function(){
    var totalScroll = $(window).scrollTop();
    if (totalScroll > indicatorPosition) {
      if(check === 1){
      myFunction();
      check++
      }    
    }
});

.section {
   min-height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section section--1">
    <p>Section 1</p>
</div>
<div class="section section--2">
    <p>Section 2</p>
    <div id="checkPosition" class="indicator">Check position</div>
    <div id="targetElement" class="target">Target: </div>
</div>