这是一个代码依赖,说明根据视窗显示的内容改变音乐:
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();
}
});