remove class from a div when in viewport

Question

as stated in the title, i need to add/remove a class from a div when and only when it is visible in browser viewport. what i want to do is trigger an animation removing a class and using css transitions.. i know how to do that, but i need the code snippet to remove the class when a certain div is visible to the user.

can anyone help?

i checked the onScreen plugin in another post but im a bit of a noob with js/jquery and i had some problems with that.

thanks so much

http://stackoverflow.com/questions/3045852/triggering-jquery-event-when-an-element-appears-on-screen — Adil Shaikh, Jun 18 '13 at 13:34
http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling — Adil Shaikh, Jun 18 '13 at 13:35
http://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible — Adil Shaikh, Jun 18 '13 at 13:35

Blowsie · Answer 1 · 2013-06-19T07:07:04.060

2

Maybe the "Element ‘in view’ Event Plugin" will be easier for you to grasp.

I have written some code to fit your requirements

Working Example

$(document).ready(function(){
    $('.myclass').bind('inview', function (event, visible) {
      if (visible == true) {
        // element is now visible in the viewport
        $(this).removeClass('myclass');
      } else {
        // element has gone out of viewport
         $(this).addClass('myclass');
      }
    });
});

edited Jun 19 '13 at 07:07

answered Jun 18 '13 at 13:36

Blowsie

40,239
15
88
108

i have this is "head" nothing gets added removed.. :\ – valerio0999 Jun 18 '13 at 14:08
you neeed to put it inside a document ready function, updated answer – Blowsie Jun 18 '13 at 15:01
maybe your struggling with the basics somewhere. Here is a working example. http://jsfiddle.net/blowsie/M2RzU/ – Blowsie Jun 19 '13 at 07:07

remove class from a div when in viewport

1 Answers1