So I'm trying to make an animation starts when is visible on the viewport, It works, but the problem is that it only works on desktop, on mobile phone don't.

I've seen a lot fo questions like this on stack but it looks like there are no answers, like this, is from 2014 Jquery addClass not working on mobile browser with 0 answers.

Here is my code

    // function to detect if an element is scrolled into view
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
};

// listen for scroll event
$(window).scroll(function () {
  // check if element is scrolled into view
  if (isScrolledIntoView($('#don'))) {
    // element is scrolled into view, add animation class
    $( "#don" ).removeClass( "donut-segment" ).addClass( "donut-segment" );
  }
});

any idea?