根据窗口位置播放粘性HTML视频

Question

所以我的页面上有两列。在左栏中，我有3段话。在右栏中，我在一个粘性容器中有3个视频。

当用户滚动时，我的粘性容器将保持静止，但它应该根据用户正在阅读的段落播放不同的视频。

我正在尝试调整这个答案，但它不起作用。

HTML

<div class="wrapper">
<div class="illustration">
<div class="gif-container">
<video class="gif" id="gif2" src="/GIF3.mp4" muted="muted"></video>
<video class="gif" id="gif2" src="/GIF2.mp4" muted="muted"></video>
<video class="gif" id="gif1" src="/GIF1.mp4" muted="muted"></video>
</div>
</div>
<div class="content">
<h1>Paragraph 1</h1>
<p class="par" id="par1">Lorem ipsum dolor sit amet.</p>
<h1>Paragraph 2</h1>
<p class="par" id="par2">Lorem ipsum dolor sit amet.</p>
<h1>Paragraph 3</h1>
<p class="par" id="par3">Lorem ipsum dolor sit amet.</p>
</div>
</div>

JS-

jQuery(document).ready(function($){
function checkPos(){
let p = $('p');
let media = $('video');
let offset = 40;
let windowBottom = $(window).scrollTop() + $(window).height() + offset;
p.each(function(index) {
let parTop = $(this).offset().top;
if ( windowBottom > parTop ) {
media.get(index).play();
}
});
}
$(document).on('scroll', checkPos);
});

错误来自于使用.each()的索引来选择和播放相关视频。我得到以下错误：Uncaught TypeError: Cannot read property 'play' of undefined。但是，index是一个数字，当我手动键入索引(0、1或2(时，我的代码就可以工作了。

我做错了什么？

Answer 1

对于那些感兴趣的人来说，修复实际上非常简单：

jQuery(document).ready(function($){

function checkPos(){
let p = $('p');
let media = $('video');
let offset = 40;
let windowBottom = $(window).scrollTop() + $(window).height() - offset;
p.each(function(index) {
let parTop = $(this).offset().top;
// Create a new variable for index
let i = index;
if ( windowBottom > parTop ) {
media.get(i).play();
}
});
}
$(document).on('scroll', checkPos);
});