How to edit a JS in order to make it works for two Ids?

Question

Firstly, I don’t have strong experience working on JS.

I have found the following code in this community and it work perfectly. Basically, it makes when you scroll into view of an element it add a new class (animation).

// Returns true if the specified element has been scrolled into the viewport.
function isElementInViewport(elem) {
  var $elem = $(elem);

  // Get the scroll position of the page.
  var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
  var viewportTop = $(scrollElem).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  // Get the position of the element on the page.
  var elemTop = Math.round($elem.offset().top);
  var elemBottom = elemTop + $elem.height();

  return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

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

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

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

// Capture scroll events
$(window).scroll(function() {
  checkAnimation();
});

Original post: Activate CSS3 animation when the content scrolls into view

However, I would like to use this JS with two different Id (#feedback and #goback) however, when I try to add another line to the original, it only works with #goback

var $elem = $('#feedback');
var $elem = $('#goback');

I think it was made to work with only one #.

Could someone help me to fix it in order to make it works with more than 1 id, please?

Thanks PD: If you are thinking to give me a negative point please let me know why.

@MattCoughlin maybe you could help me with that? (it is your code) — , Feb 22 '17 at 11:52

score 0 · Answer 1 · answered Feb 22 '17 at 10:45

You can execute the method twice and use the '&&' operate to check if the results are both true.

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

In your example this would look something like this:

// 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');
  }
}

Thanks. I am trying it now. Unfortunately it doesn't work. Any ids work now. — , Feb 22 '17 at 11:02

score 0 · Accepted Answer · answered Feb 23 '17 at 11:04

Solved

// Returns true if the specified element has been scrolled into the viewport.
function isElementInViewport(elem) {
  var $elem = $(elem);

  // Get the scroll position of the page.
  var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
  var viewportTop = $(scrollElem).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  // Get the position of the element on the page.
  var elemTop = Math.round($elem.offset().top);
  var elemBottom = elemTop + $elem.height();

  return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

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

  if ($elem2.hasClass('fadeInUp')) return;

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

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

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

// Capture scroll events
$(window).scroll(function() {
  checkAnimation();
});

How to edit a JS in order to make it works for two Ids?

2 Answers2