Javascript功能在一定的高度

Question

如果您查看此链接并向下滚动：http://templates.entheosweb.com/template_number/live_demo.asp?TemplateID=51090

您会看到如果向下滚动，则会显示动画。 Javascript函数在某个高度触发，我也希望实现这种效果。但我不知道从哪里开始。如何在一定高度触发功能？

Answer 1

试试这样：

window.addEventListener('scroll', function() {
    var hasFired = false;

    if (document.body.scrollTop >= 250 && !hasFired) {
        hasFired = true;
        // do something when scrolling down
    }

    if (document.body.scrollTop < 250 && hasFired {
        hasFired = false;
        // do something when scrolling up, and enable the scroll-down event to fire once again
    }
});

第二个if()是可选的。

Answer 2

您可以简单地使用滚动侦听器，在特定的高度，您可以调用您的功能： -

window.onscroll = function() {scrollFunction()}; 

function scrollFunction() {
if (document.body.scrollTop == 250) {
   myCustomFunction();
}
}

function myCustomFunction {
  // define your logic here
 }

Answer 3

有很多库（for example）来实现这个动画，谷歌为他们。 如果你想编写自己的自定义逻辑，而不是检查JavaScript的window.scroll函数。