javascript - show element when class is in viewport -
I am trying to make a developer when only elements of a specific class are visible in the viewport.
I almost got it by
$ (document) .ready (function () {$ ('. Myclass'). Bind ('inview', function ( Event, visible) {if (visible == true} {// element visibleport $ (this) is visible in .removeClass ('myclass'); Alert ('h2!')) And / element from viewport $ Has been excluded (this) .addClass ('myclass');}});})
But as you can see from this edit, each event is triggered every time the class enters or exits the viewport, thus an output element has the desired effect Even if the element is visible with the other relevant class.
I was also messing with this plugin but I could not understand what I want to do it.
Just keep an eye on the visual elements in the array:
var visibleEls = []; $ ('. Myclass'). Bind ('invoice', function (event, view) {if (visible == true) {// entry is now visible in the viewport, if (~ ~ visible styles. Indexex (this)) visibleEls .push (this); } And {// element are out of viewport var I = visibleEls.indexOf (this); if (~ i) appears. Splice (i, 1);} $ ('body'). Toggleclass ('red', !! visible length);});
Note that you can simplify it by
var counter = 0; $ ('. Myclass'). Bind ('invoice', function (event, view) {counter = = visible * 2-1; $ ('body'). ToggleClass ('red', !! counter);});
But this may be more error prone.
Comments
Post a Comment