Javascript 如何编辑JS以使其适用于两个ID？

首先，我没有很强的JS工作经验

我在这个社区中发现了以下代码，它工作得非常好。基本上，当您滚动到某个元素的视图时，它会添加一个新类（动画）

//如果指定的元素已滚动到视口中，则返回true。
函数IsElementViewPort（elem）{
变量$elem=$（elem）；
//获取页面的滚动位置。
var scrollem=（（navigator.userAgent.toLowerCase（）.indexOf（'webkit'）！=-1）？'body'：'html'）；
var viewportTop=$（scrolllem.scrollTop（）；
var viewportBottom=viewportTop+$（window）.height（）；
//获取元素在页面上的位置。
var elemTop=Math.round（$elem.offset（）.top）；
var elemBottom=elemTop+$elem.height（）；
返回（（elemTopviewportTop））；
}
//检查是否是开始动画的时间。
函数checkAnimation（）{
var$elem=$（“#反馈”）；
//如果动画已经启动
if（$elem.hasClass（'fadeInUp'））返回；
如果（IsElementViewPort（$elem））{
//启动动画
$elem.addClass（'fadeInUp'）；
}
}
//捕获滚动事件
$（窗口）。滚动（函数（）{
检查动画（）；
});您可以执行该方法两次，并使用“&&”操作检查结果是否均为真

if (isElementInViewport('#feedback') && isElementInViewport('#goback')) {
    // DO SOMETHING
}

在您的示例中，这看起来像这样：

// Check if it's time to start the animation.
function checkAnimation() {
  var $elem1 = $('#feedback');
  var $elem2 = $('#goback');

  // If the animation has already been started
  if ($elem.hasClass('fadeInUp')) return;

  if (isElementInViewport($elem1) && isElementInViewport($elem2)) {
    // Start the animation
    $elem.addClass('fadeInUp');
  }
}

解决


//如果指定的元素已滚动到视口中，则返回true。
函数IsElementViewPort（elem）{
变量$elem=$（elem）；
//获取页面的滚动位置。
var scrollem=（（navigator.userAgent.toLowerCase（）.indexOf（'webkit'）！=-1）？'body'：'html'）；
var viewportTop=$（scrolllem.scrollTop（）；
var viewportBottom=viewportTop+$（window）.height（）；
//获取元素在页面上的位置。
var elemTop=Math.round（$elem.offset（）.top）；
var elemBottom=elemTop+$elem.height（）；
返回（（elemTopviewportTop））；
}
//检查是否是开始动画的时间。
函数checkAnimation（）{
var$elem=$（“#反馈”）；
变量$elem2=$（“#goback”）；
if（$elem2.hasClass（'fadeInUp'））返回；
如果（IsElementViewPort（$elem2））{
//启动动画
$elem2.addClass（'fadeInUp'）；
}
//如果动画已经启动
if（$elem.hasClass（'fadeInUp'））返回；
如果（IsElementViewPort（$elem））{
//启动动画
$elem.addClass（'fadeInUp'）；
}
}
//捕获滚动事件
$（窗口）。滚动（函数（）{
检查动画（）；
});谢谢。我现在正在尝试。不幸的是，它不起作用。“现在有身份证了吗？”马特考林，你能帮我吗？（这是您的代码）