如何使用 in-view.js 检测元素何时滚动到视口中

Question

我正在构建一个单页网站，我需要在其中检测元素何时滚动到视图中。本质上是尝试根据与元素的背景颜色相反的黑/白颜色更改菜单。

我找到了一个名为in-view的javascript实用程序，它似乎可以做我想做的事。但是有问题;

1. 向下滚动时有效...但。。。
2. 向上滚动时它不起作用。这是由于给它一个窗口高度的偏移量(因为我希望它在到达菜单后触发(。
当您
3. 到达底部时，页面高度<面板不会触发插件。>

这是我的JS代码：

var winHeight = $(window).height()-75;
inView.offset(winHeight);
inView('.panel-content')
.on('enter', function(el){
var color = $(el).attr('data-color');
if (color === 'dark') {
$('#masthead').removeClass('light').addClass('dark');
} else if (color === 'light') {
$('#masthead').removeClass('dark').addClass('light');
} else {
$('#masthead').removeClass('light').addClass('dark');
}
});

。这是我的HTML的结构：

请注意，面板高度取决于内容，但从大约 400 到 900 不等。

<div id="masthead">logo, nav etc...</div
<div class="panel-content" data-color="light" style="background-colour:#222"></div>
<div class="panel-content" data-color="dark" style="background-colour:#ddd"></div>
<div class="panel-content" data-color="dark" style="background-colour:#ddd"></div>
<div class="panel-content" data-color="light" style="background-colour:#222"></div>
<div class="panel-content" data-color="dark" style="background-colour:#ddd"></div>
<div class="panel-content" data-color="light" style="background-colour:#222"></div>
<div class="panel-content" data-color="dark" style="background-colour:#ddd"></div>

提前感谢任何帮助：-(

Answer 1

我找到了解决方案！我首先尝试检测滚动方向;因此，如果向下滚动页面，请将偏移量设置为窗口高度，否则将偏移量设置为 0...——这奏效了。

检测方向的需要使我回到了视图中的文档，因为我认为必须有更好的方法。事实证明，您还可以指定一个包含边界的对象(顶部，右侧，底部，左侧(，否则它将每个值使用单个值！这就解释了为什么我会遇到这些问题。

我的最终JS代码：

jQuery(function($) {
var $target = $('#masthead');
var winHeight = $(window).height()-1; //1px less so it triggers using nav links
inView.offset({
top: 0,
right: 0,
bottom: winHeight,
left: 0
});
inView('.panel-content')
.on('enter', function(el){
var color = $(el).attr('data-color');
if (color === 'dark') {
$target.removeClass('light').addClass('dark');
} else if (color === 'light') {
$target.removeClass('dark').addClass('light');
} else {
$target.removeClass('light').addClass('dark');
}
});
});

• 请注意，HTML 和以前一样。

希望这可以帮助其他试图实现类似变色导航或类似导航的人。