function isScrolledIntoView(elem) { var $window = $(window), docViewTop = $window.scrollTop(), docViewBottom = docViewTop + $window.height(), elemTop = $(elem).offset().top, elemBottom = elemTop + $(elem).outerHeight(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } $(window).on("scroll", function() { // Example 1 if (isScrolledIntoView('span')) { $('span').text('Hey there!'); } else { $('span').text('Good bye!'); } // Example 2 $('div').each(function() { if (isScrolledIntoView(this)) { $(this).addClass('red'); } else { $(this).removeClass('red'); } }); });
<h2>Scroll Down! ⇓</h2> <span></span> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
body { height:3000px; background-color:#FFC90D; } h2 { font:bold 20px Times,Serif; margin:30px 30px 300px; } span { display:inline-block; background-color:green; padding:5px 10px; color:white; } div { width:120px; height:200px; background-color:black; margin:10px auto; } div.red { background-color:red; }