javascript - 如何在 jQuery 中的滚动上添加事件类？

Question

<强> Here's a demo in Plunker.

我有一些带有 data-msid ('1', '2', '3') 的 div 元素，每个元素都有一个对应的 页脚中的 li 与 data-msidatrr ('1', '2', '3')。

问题:

当用户滚动且相应的 div 在视口(viewport)中可见时，我想在 footer li 上添加事件类。

示例:

当 id='first' data-msid="1" 出现在视口(viewport)中时，页脚中的 li data-msidatrr="1" 应该有一个 active 类，对于 div 和 footer li 的其余部分依此类推。

这是我的 jQuery 代码:

$(function(){
    $.fn.isOnScreen = function(){
        var win = $(window);

        var viewport = {
            top : win.scrollTop(),
            left : win.scrollLeft()
        };

        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();

        var bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();

        return ( ! (
            viewport.right < bounds.left ||
            viewport.left > bounds.right ||
            viewport.bottom < bounds.top ||
            viewport.top > bounds.bottom
        ));
    }; /* END $.fn.isOnScreen */

    $( "#container" ).scroll(function() {
        console.log('scrlling');

        $.each( $('#container>div'), function(i, left) {
            console.log(i);
            var msid = $(left).attr('data-msid');
            console.log($(left).attr('data-msid'));
            console.log($('#first').isOnScreen());
            $('.fC[data-msidatrr=]+msid').addClass('active');
        })
    });
}) /* END $(function() */

Answer 1

<强>

Here's a working JSFiddle.

首先，您的 HTML 和 jQuery 中有一些错误:

<!-- wrong div id -->
<div id='second' data-msid="12">
<!-- correct div id -->
<div id='second' data-msid="2">

<!-- wrong -->
<li class='item data-msidatrr="3"'>third</li>
<!-- correct -->
<li class='item' data-msidatrr="3">third</li>

<小时/>

// wrong
$('.fC[data-msidatrr=]+msid').addClass('active');
// correct
$(".fC li[data-msidatrr='" + msid + "']").addClass('active');

<小时/>

其次，考虑使用这个简洁的函数来检测滚动时 #container 中的 div 是否可见: (credits to reference)

function isScrolledToView(el) {
    var container = document.getElementById('container').getBoundingClientRect();
    var div = el.getBoundingClientRect();

    console.log('container.top = '+container.top+'; container.bottom = '+container.bottom)

    return ((div.top >= container.top) && (div.top <= container.bottom));
}

上面的代码将简化您的代码，因为您不再需要 $.fn.isOnScreen 。

<小时/>

奖金(可选):

• 用双引号而不是单引号将 HTML 元素属性括起来:
  • id="container" 不是 id='container'
• 对于您的 third 和 fourth div，由于高度较短，它们将同时处于“事件”状态，因此您可能需要执行某些操作有了它。