Question

我想在页面滚动到某个元素时运行动画。这工作正常。但主要问题是动画一次又一次地运行。我想只运行一次动画。

这是我用作参考的代码。

HTML

<div>Scroll Down</div>
<h1 id="scroll-to">I am The H1</h1>

JS

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
    console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH)){
     alert('you have scrolled to the h1!');
   }
});

CSS

div {
    height:800px;
    background:red;
}


http://jsfiddle.net/n4pdx/

Answer 1

当您已经为滚动设置动画时，可以设置标记：

var scrolled = false;

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
    console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH)){
    if(!scrolled){
        scrolled = true;
        alert('you have scrolled to the h1!');
    }
    }
    else{
        scrolled = false;
    }
});

在这个例子中，我在用户上线时重置了标志。

Answer 2

当用户滚动到特定div时设置标志。喜欢：

var flag = true;
$(window).scroll(function() {

   var hT = $('#scroll-to').offset().top,
   hH = $('#scroll-to').outerHeight(),
   wH = $(window).height(),
   wS = $(this).scrollTop();
   console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH) && flag){
     alert('you have scrolled to the h1!');
     flag = false;
  }
});

页面滚动到某些元素触发事件

2 个答案: