如何在jQuery中滚动添加活动类？

Question

Here's a demo in Plunker.

我有一些databaseRef.child("posts").child(userID!).observe(.childAdded, with: { (snapshot) in let key = snapshot.key let snapshot = snapshot.value as? NSDictionary snapshot?.setValue(key, forKey: "uid") if(key == self.loggedUser?.uid) { print("same as logged in user") } else { self.usersArray.append(snapshot) self.followUsersTableView.insertRows(at: [IndexPath(row:self.usersArray.count-1,section:0)], with: UITableViewRowAnimation.automatic) } }) { (error) in print(error.localizedDescription) } } 元素div（'1'，'2'，'3'），每个元素在页脚<<}中都有对应的data-msid / strong>与li（'1'，'2'，'3'）。

问题：

我希望在用户滚动时在data-msidatrr上添加有效课程，并在footer li中显示相应的div。

示例：

当viewport出现在视口中时，页脚中的id='first' data-msid="1"应该有一个li data-msidatrr="1"类，等等active和div的其余部分

这是我的jQuery代码：

footer li

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。

BONUS（可选）：

• 用双引号括起HTML元素属性，而不是单引号：
  • id="container" NOT id='container'
• 对于您的third和fourth div，由于身高较短，他们会同时“活跃”，因此您可能想要使用它。