如何在 forEach 循环中使用 offset().top

Posted 2023-05-09

【中文标题】如何在 forEach 循环中使用 offset().top

【英文标题】：How to use offset().top with a forEach loop

【发布时间】：2016-07-25 23:41:59

【问题描述】：

感谢您查看我的问题。我有一个位置固定的导航栏和一个 ul。当导航的 offset().top 大于每个 li 的 offset().top 时，我想将一个类单独应用于每个 li。当用户向下滚动页面时，每个 li 应该 1) 显示并 2) 被赋予一个类，以便它以动画方式进入页面。

var nav = $('#nav').offset().top;

[].forEach.call(document.getElementsByClassName('portfolio_pieces'), (function(piece)
  console.log(piece);
  if (piece.offset().top < nav) 
    $(piece).show().addClass("rollIn");
  
));

我正在尝试使用 forEach 循环来完成此操作；但是，控制台告诉我 piece.offset 不是一个函数。每件作品代表一个具有“portfolio_pieces”类的li。有没有其他方法可以做到这一点，还是我错过了任何不允许 offset 作用于这些 li 元素的东西？

非常感谢您的阅读，如果您有任何想法，请分享！

【参考方案1】：

如果你想使用jQuery offset method，那么它应该应用于jQuery元素。在你的情况下：

$(piece).offset().top

如果您想坚持使用纯 javascript，请查看offsetTop property：

piece.offsetTop

说明：您使用了 Javascript 的 getElementByClassName 方法，其中：

返回一个包含所有子元素的类数组对象 给定的类名

因此，您不能将 jQuery 方法应用于其中任何一个。