isOnScreen | Simple jQuery plugin to determine if an element | Plugin library

Just a quick question, complete novice when it comes to JavaScript but am learning! I have this code where when the elements have values of data-animate-in="fadeIn" data-animate-in-delay="100" They fade in on scroll. That all works fine, the only problem I'm having is that they are now fading out when I scroll down the page... Is there a way I can have it so once it fades in the first time, it stays solid.

Here's my code

JavaScript

I'm trying to set up my code so it can detect if a certain section of my HTML is at the top of the viewport. I'm getting the error:

Uncaught TypeError: element.getBoundingClientRect is not a function

This thing is giving me headaches as I just can't find the way to do it. I downloaded a script which helped me make the charts with an animation (jquery.lineProgressbar.js).

The charts works pretty well, but the problem is the animation runs when the page is loaded. I want people to be able to see the animation of each chart. I have a lot of charts in the same page, and I need them all to execute the animation as they enter the viewport.

I know this question has been posted a lot of times, but none of them solves my problem.

I decided to make a Plunker example of my code so you can see better how it works. Here is my Plunker

I tried adding a code before the "Progressing" part in the jquery.lineProgressbar.js, to tell "apply the animation once the div called "progressbar" enter viewport:

In my app I have a chat view controller. When this controller is presented (visible on screen) I don't want to receive push notifications from firebase. Otherwise yes. I handle the notifications in a separate class, in which I want to do something like this, but I don't have access to that variable, neither to an instance of that chat controller:

I'm trying to pull through a value from the dataLayer to fire a piece of HTML. All pulling through fine, however if the value is 'undefined' rather than an actual number I don't want it to fire.

How can I solve this? Tried everything but it's returning true/false rather than not firing.

I want to fade in an element only when it's visible in the viewport. To do this, I'm using a isOnScreen() function. It works fine, but only with one element, and if more elements with the same class are on the page, it works only with the first one.

How can I use the function isOnScreen() for all the elements on page?

For example, I have an element .quote at the beginning and one at the end of the page. The first element works fine, the element at the bottom not.

I've tried to use $('.quote').each(function() { and inside isOnScreen()' but it doesn't work.

EDIT

I found the solution, see my own answer below.

I want to have possibility of load image into window and then read specific pixel, change its colour and finally put the pixel something else. Unfortunately reading pixels does not work:

Here's a demo in Plunker.

I have a few div elements with data-msid ('1', '2', '3'), and each one has a corresponding li in footer with data-msidatrr ('1', '2', '3').

PROBLEM:

I want to add active class on footer li when the user scrolls and the corresponding div becomes visible in viewport.

EXAMPLE:

When id='first' data-msid="1" appears in the viewport, li data-msidatrr="1" in footer should have an active class, and so on for the rest of the div and footer li.

Here's my jQuery code: