javascript - 检查元素在滚动上是否可见

Question

我在这里使用这个github源代码https://github.com/customd/jquery-visible我正在尝试检查标记为“test”的 div 对视口(viewport)是否可见，并向元素添加一个类。

我在这里尝试过这个。

$(window).scroll(function() {
        var detectPartial = $('#test').val() == 'partial';

        // Is this element visible onscreen?
        var visible = $(this).visible( detectPartial );

        // Set the visible status into the span.

        if(visible) {
            $('#test').addClass('active');
        }
    });

脚本代码:

<script type="text/javascript">
    $(window).scroll(function() {
        if($('#test').visible()){
            $('.contact').addClass('active');
            $('.home').removeClass('active');
        } else {
            $('.home').addClass('active');
            $('.contact').removeClass('active');
        }
    });
</script>

HTML 代码:

<div class="test" id="test" style="height: 700px"></div>

<li class="main-li"><a href="#" class="nav-links contact" id="contact">Contact Us</a></li>

我正在尝试检查 test 对视口(viewport)是否可见。如果它可见，则将 active 类添加到 contact。

Answer 1

这是实现该结果的一种方法。

$(window).scroll(function() {
    if ($('#test').visible()) {
        $('#test').addClass('active');
    }
});

我不确定您要使用 .val() 方法做什么，并且您的 $(this) 与#test div 就是这样。能详细解释一下吗？