滚动时如何检测DIV的ID

Question

我有三个具有此 ID 的 DIV（#firstCTA、#secondCTA y #thirdCTA），当用户向下滚动以更改 styles 或激活 animation 时，我需要一个一个地检测。 我在这个例子中激活了一个 ALERT

HTML5代码

<div class="container-fluid" id="firstCTA">
      <div class="row">
          <div class="col-12 text-center"> 
              <img src="assets/imgs/clic-aqui.png" class="arrow-size"> 
              <h3 class="cta-here-text"><b>Da clic aquí</b></h3>
              <br>
          </div>
      </div>
  </div>

JS代码

$(window).scroll(function(){
        if ($('#firstCTA').offset().top >= $(window).scrollTop()){
            //do something
            alert('hey bbay');
        }
        else{
            //do something else
        }
    });

真的，这段代码不起作用，因为没有检测到 ID。 styles 在 DIV 中的变化，只有在用户向下滚动并检测 ID 时才有效。

Answer 1

我建议你使用一些图书馆，比如航点

你可以在哪里做

var waypoint = new Waypoint({
  element: document.getElementById('firstCTA'),
  handler: function(direction) {
    // do your stuff (you can use "this" to refer to the element)
  }
})

或者，使用 jQuery

$('#firstCTA').waypoint(function(direction) {
  // do your stuff
}, options)