Q:

Run at Element's Height

I need some JavaScript to run when the user scrolls past a certain element. In this case, the element is <span class="accomp"></span>. The script I put together to handle this works when given a pixel value, but this value may not correspond to the correct area on the page depending on the user's screen resolution, browser, etc.
$(window).scroll(function () {
   if ($(window).scrollTop() === $(document).height() - $(window).height() - $( "span.accomp" ).height()) {
      meSpeak.speak('hello world', { pitch: 10, speed: 100 });
   }
});

The pixel value based script would have the pixels instead of $( "span.accomp" ).height()

A:

Use jQuery's offset().

Get the current coordinates of the first element in the set of matched elements, relative to the document.

var spoken = false;

$(window).scroll(function(){
    if(spoken) return;

    var scrollTop = $(window).scrollTop();
    var elementTop = $("span.accomp").offset().top;

    if(scrollTop >= elementTop){
        meSpeak.speak('hello world', { pitch: 10, speed: 100 });
        spoken = true;
    }
});

