Question

I’m using stellar JS (http://markdalgleish.com/projects/stellar.js/) to put together a parallax scrolling site for Ipad, I would like to trigger a function at a certain height (to animate a slide from the right of the screen) – has anyone had expereince of monitoring for a screen height position and triggering a function – either using stellar.js or in general.

Cheers
paul

Answer 1

Triggering a function once you scroll to a certain height is pretty doable with a bit of jQuery – here’s some simple code to do it:

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 takes a height and a function – the height specifies at what scroll distance from the top the function should be triggered. This is done by remembering what the previous height from the top the document was, then checks every time the user scrolls if they’ve passed the target. If they have, the function is fired.

As-is, this will repeat the function every time the scroll location is passed – if you want a single execution though, it shouldn’t be too hard to modify.