Question

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

我发现了一个名为in-view的javascript实用程序似乎可以执行我想要的操作。但是有问题;

向下滚动时有效......但......
向上滚动时不起作用。这是因为它给了它一个窗口高度的偏移量（因为我希望它一旦到达菜单就会触发）。
小组＆lt;当你到达底部时，页面的高度不会触发插件。

这是我的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 ... - 这样就可以了。

需要检测方向导致我回到in-view documentation，因为我认为必须有更好的方法。事实证明，你也可以指定一个包含边界的对象（顶部，右边，底部，左边），否则它会为每个值使用单个值！这解释了我遇到问题的原因。

我的最终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与以前一样。

希望这可以帮助那些试图获得类似颜色变化导航或类似功能的人。

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

1 个答案: