javascript - Stellar JS / 在特定高度触发功能

Question

我正在使用 stellar JS (http://markdalgleish.com/projects/stellar.js/) 为 Ipad 组合一个视差滚动站点，我想在某个高度触发一个函数（从屏幕右侧） - 有没有人有过监控屏幕高度位置和触发功能的经验 - 无论是使用 stellar.js 还是一般情况下。

干杯保罗

Answer 1

滚动到某个高度后触发一个函数是非常可行的——这里有一些简单的代码来做到这一点：

function scrollHeightTrigger (height, fn) {
  var old_height = $(document).scrollTop();
  $(document).scroll(function () {
    var new_height = $(document).scrollTop();
    if (((height < new_height) && (height >= old_height)) ||
        ((height < old_height) && (height >= new_height))) {
      fn();
    }
    old_height = new_height;
  });
}

scrollHeightTrigger 接受一个高度和一个函数 - 高度指定应该在距顶部的滚动距离处触发该函数。这是通过记住文档顶部之前的高度来完成的，然后在用户每次滚动时检查他们是否已经通过了目标。如果有，则触发该函数。

照原样，这将在每次传递滚动位置时重复该功能 - 如果您想要一次执行，那么修改它应该不会太难。