Guys, I want to try to implement it myself, I don’t want to upload a lot of unnecessary “stuff” onto the site, but here’s the catch. I can't figure out how to add a class to elements that are already in the scope of the screen. There is such a code, but it adds the class "animate" to all .sect elements, regardless of whether it is visible on the screen or not.

$(window).scroll(function () { var sect=$('.sect'); if(sect.is(':visible')){ sect.addClass('animate'); } });
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

It is solved as follows. We get the current position of the element, if it goes beyond the position of the visible window, that is, above or below, we do nothing; if the position of the element enters the visible area, add the class red . All visible objects get the class red , invisible lose it.

All this happens in the render() function, when loading the document we launch it and, accordingly, when scrolling the document $(document).scroll(render); . Bypassing all the elements (our divs) we do with the method each() .

Of course, here in the field of visibility I consider only the upper left corner of the divs, and not the whole div, that is, it will not turn red if its lower part appears when scrolling from bottom to top, and vice versa.

An example is uploaded to jsbin.com and here:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript"> $(function(){ var res = $('#result'); var s = $('#scroll'); render(); $(document).scroll(render); function render () { res.html('windowInnerHeight: ' + $(window).innerHeight() + "<br>windowScrollTop: " + $(window).scrollTop()); res.html(res.html() + '<br>eq0 offsetTop: ' + $('#scroll div').eq(0).offset().top + '<br>eq9 offsetTop: ' + $('#scroll div').eq(9).offset().top); $('#scroll > div').each(function(index, el) { if ( $(el).offset().top >= $(window).scrollTop() && $(el).offset().top <= ($(window).innerHeight() + $(window).scrollTop()) ) { $(this).addClass('red') } else { $(this).removeClass('red'); } //$(this).toggleClass('red'); }); var i = $('#scroll > div').map(function(index, el) { //return $(this).css('font-size') !== '17px' ? null : i; return $(this).attr('class') == 'red' ? '[red]' : '[ ]'; }); console.log(i); res.html(res.html() + "<br>Текущие классы: <br>" + $.makeArray(i)); } }); </script> <style type="text/css"> * { margin: 0; position: 0; } #scroll > div { margin-bottom: 50px; border: 1px solid grey; width: 50px; height: 50px; } #result { width: 400px; height: 150px; position: fixed; top: 0; right: 0; border: 1px solid green; margin: 0; } #scroll > .red { border: 2px solid red; } </style> </head> <body> <div id="result"></div> <div id="scroll"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> </body> </html>