Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE HTML> <html> <head> <title>Title of the document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <style> body { text-align: center; } h2 { color: green; } </style> </head> <body> <h1> Scroll </h1> <div class="div"> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> <h2>Text</h2> </div> <script> $(window).on('scroll', function() { if($(window).scrollTop() >= $('.div').offset().top + $('.div').outerHeight() - window.innerHeight) { alert('Bottom'); } }); </script> </body> </html>