Howto: add class when section is in viewport

I am trying to get a drawing animation effect similar to https://stackoverflow.com/a/45378478 (Preview: https://codepen.io/jbanegas/pen/LjpXom) to load when the user scrolls to this section of the page. It’s intended to add multiple of these drawing boxes as the user navigates the page. I realize that jQuery is sort of outdated now, but this is on a WordPress website that already utilizes this framework. jQuery HTML I’ve tried replacing the .ready() with: onload – https://www.w3schools.com/jsref/event_onload.asp .scroll() – https://api.jquery.com/scroll/ Any help would be greatly appreciated. Answer You are missing the basics. Apart from adding on scroll event you need to find out if

prevent click event after drag in jQuery

I have a draggable <div> with a click event and without any event for drag. but after i drag <div> the click event is apply to <div>. how can prevent of click event after drag? http://jsfiddle.net/prince4prodigy/aG72R/ Answer I made a solution with data and setTimeout. Maybe better than helper classes. and Check the fiddle.