How to make jQuery waypoints plugin fire when an element is in view and not scrolled past?

Question

Please see this:

http://jsfiddle.net/5Zs6F/2/

As you can see only when you scroll past the first red rectangle it turns blue, I would like it to turn blue th

Answer 1

If you want to solve this issue with css then also you can do it by using below css.

img[data-src]::before {
    content: "";
    display: block;
    padding-top: 70%;
  }

We are trying to use pseudo-elements (e.g. ::before and ::after) to add decorations to img elements.

Browsers don't render an image’s pseudo-elements because img is a replaced element, meaning its layout is controlled by an external resource.

However, there is an exception to that rule: If an image’s src attribute is invalid, browsers will render its pseudo-elements. So, if we store the src for an image in data-src and the src is empty, then we can use a pseudo-element to set an aspect ratio:

As soon as the data-src becomes the src, the browser stops rendering ::before and the image's natural aspect ratio takes over.