JSFiddle - React, Tailwind, and code Playground

by Ankit Patidar

HTML

<div style="text-align:center;"
	id="body">
	<h1 style="color:green;">
			GeeksForGeeks
		</h1>
	<p id="GFG_UP"
	style="font-size: 17px;
			font-weight: bold;">
	</p>
	<div class="div">
		<h1>GeeksforGeeks</h1>
		<h1>GeeksforGeeks</h1>
		<h1>GeeksforGeeks</h1>
		<h1>GeeksforGeeks</h1>
		<h1>GeeksforGeeks</h1>
		<h1>GeeksforGeeks</h1>
		<h1>GeeksforGeeks</h1>
		<h1>GeeksforGeeks</h1>
		<h1>GeeksforGeeks</h1>
		<h1>GeeksforGeeks</h1>
		<h1>GeeksforGeeks</h1>
		<h1>GeeksforGeeks</h1>
		<h1>GeeksforGeeks</h1>
	</div>
</div>

JavaScript

$('#GFG_UP').text(
		'Scroll till bottom to get alert!');
		
		$(window).on('scroll', function() {
			if ($(window).scrollTop() >= $(
			'.div').offset().top + $('.div').
				outerHeight() - window.innerHeight) {
				
				alert('You reached the end of the DIV');
			}
		});