在元素的高度跑

Question

当用户滚动到某个元素时，我需要运行一些JavaScript。 在这种情况下，元素为<span class="accomp"></span> 。 当给出像素值时，我放在一起处理的脚本可以工作，但是取决于用户的屏幕分辨率，浏览器等，此值可能不对应页面上的正确区域。

$(window).scroll(function () {
   if ($(window).scrollTop() === $(document).height() - $(window).height() - $( "span.accomp" ).height()) {
      meSpeak.speak('hello world', { pitch: 10, speed: 100 });
   }
});

基于像素值的脚本将使用像素而不是$( "span.accomp" ).height()

Answer 1

使用jQuery的offset（） 。

获取相对于文档的匹配元素集合中第一个元素的当前坐标。

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;
    }
});

Answer 2

当滚动顶部到达特定元素的滚动时，您需要触发事件。

var elementTop = $(".accomp").offset().top;    
$(document).scroll(function(){
    if($(this).scrollTop() > elementTop)
    {   
        //add your code here
    }
});

注意：请确保您正在使用该元素的类，如果该类中有多个元素的结果可能与预期不符，请改为使用类id。