当某个dom元素进入视口时改变音轨

changing audio track when a certain dom element enters viewport

本文关键字：视口 改变 音轨 dom 元素      更新时间：2023-09-26

这是一个代码依赖，说明根据视窗显示的内容改变音乐:

http://codepen.io/littleredbowtie/pen/epONpM

一首歌曲是由顶部的元素触发的，而另一首歌曲是在滚动到底部时触发的。然而，如果你从顶部滚动到中间，然后再回到顶部，第一首歌就会重新开始。因为它是相同的DOM元素进入视口，我不想重置音乐。我尝试使用变量来跟踪最近查看的触发器，例如:

var oldInview = "";

，只有在音乐不同的情况下才改变音乐。但正如你从代码中看到的，它不起作用。推荐的解决方案是什么?

与其将$('p.inview1').bind(...)包装在if中，不如将&& oldInview !== 'view1'添加到if (visible)中。这可以确保在oldInvew === 'view1'情况下，尽管事件被触发并检测到，但不会再次调用任何内容。

$('p.inview1').on('inview', function (event, visible) {
  if (visible && oldInview !== "view1"){
    $(this).text('Yay! You can see me1!');
    myFunctionT1();
    oldInview = "view1";
  } else {
    $(this).text('Hidden again. Muhahah!');
    myFunctionP1();
  }                
});
相关文章：