当元素位于窗口顶部400像素以内时,使用jQuery函数

jQuery function when elements are within 400 pixels of the top of the window

本文关键字:使用 函数 jQuery 400像素 顶部 于窗口 元素 窗口      更新时间:2023-09-26

我目前有以下,但我卡住了。如有任何提示,不胜感激

  • 从div (.examples)中获取所有数据位置值
  • 当其中一个距离顶部400像素时执行魔术,每次其中一个距离顶部400像素时执行魔术

在我当前的设置中,它说"contentPosition。"Offset"不是函数

    $(window).scroll(function () {
            var contentPosition = [];
            $('.examples').each(function () { //Get elements that have an id=
                contentPosition.push($(this).data('position')); //add id to array
            });
            var top = contentPosition.offset().top - $(document).scrollTop();
            if (top > 400) {
                console.log('COMBO BREAKER');
            }
        });

你的嵌套是出来的,你也需要使用$(this)而不是contentposition数组作为对象来测试。(我在这里假设你想要COMBO BREAKER在对象距离顶部400像素或更小的时候出现)

看到这个工作小提琴(更新):https://jsfiddle.net/sijpkes/brjpt501/4/

 $(window).scroll(function () {
        var contentPosition = [];
        $('.examples').each(function () { //Get elements that have an id=
            contentPosition.push($(this).data('position')); //add id to array
              var top = $(this).offset().top - $(document).scrollTop();
              if (top < 400) {
                   console.log('COMBO BREAKER');
              }
        });
    });

contentPosition是一个元素数组。您可能需要使用:

contentPosition[i].offset().top

其中,i是循环的迭代器。

所以,如果你想对它们中的每一个做点什么,你需要:

for (i = 0; i < contentPosition.length; i++) {
    var top = contentPosition[i].offset().top - $(document).scrollTop();
    if (top > 400) {
        console.log('COMBO BREAKER');
    }
}

contentPosition是一个数组,对吗?那么循环遍历它并检查位置:

for(var i = 0; i < contentPosition.length; i++){
  var top = contentPosition[i].offset().top - $(document).scrollTop();
  if (top > 400) {
    console.log('COMBO BREAKER');
  }
}