Question

当我滚动时，我想执行一个函数并检测我的element.offset().top何时处于视口（窗口）的10％左右。我该怎么办？

我现在有这个。

$(window).on('scroll', function() {
    var wst = $(this).scrollTop();
    var wh = $(this).height();
    var elpos = wrapper.offset().top;

    if (wst >= elpos) {
      console.log('snoop doggy dog');
    }
});

感谢您的帮助。

注意：元素位置顶部需要占据窗口的10％。不是文件的10％。感谢。

Answer 1

我为您编写了一个不同的实现，它将帮助您完成任务。我在片段中解释其余部分作为评论。

$(window).on('scroll', function() { /* OnScroll */

    /* Calculate if the scroll position is > 10% */
    if($(document).scrollTop() > (0.1 * $(document).height())) { 
        console.log('Scroll Passed 10%');
    } else {
        /* Less than 10% */
    }
});

Demo

没有把这个问题安静得很好，所以删除了。

Answer 2

首先，我建议在滚动函数之外设置一个标志变量，这样在语句为真时调用一次动作。

var flag = true;
$(window).on('scroll', function() {
    var wst = $(this).scrollTop();
    var wh = $(this).height();
    var elpos = wrapper.offset().top;

    if (wst >= elpos*0.1 && flag) {
        flag = false;
        console.log("in")

        tabs.first().addClass('active');

        sections.first().find('figure').addClass('figureAnimateIn');
        setTimeout(function(){
            sections.first().find('.info').addClass('infoAnimateIn');
        }, 300);

    }
});

如果元素偏移顶部是视口的10％

2 个答案: