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。

在Element's Height运行

2 个答案: