Creating a spash screen kind of pop up when you reach the end of the page - Javascript

How to detect if user has scrolled to the bottom of the page - Javascript, pop up

<div id="message">Are you on your way?</div>


<script type="text/javascript">
 document.getElementById("message").style.display = "none";

        function Show_me_some_Attributes () {
            var display  = document.getElementById ("display1");
            display.rows[1].cells[0].innerHTML = document.body.scrollHeight;//entire height
			display.rows[1].cells[1].innerHTML = window.innerHeight ;//height of the visible area
            display.rows[1].cells[2].innerHTML = window.innerHeight + window.pageYOffset; // don't use scrollY as it's not compatible with ie9
			display.rows[1].cells[3].innerHTML = window.pageYOffset;// pixels scrolled to what is visible in the upper left corner of the window
			if ((window.innerHeight + window.pageYOffset)+1>= document.body.scrollHeight) { //+1 because it is not so exact
      		document.getElementById("message").style.display = "block";
    		   }
        }
		window.onscroll = Show_me_some_Attributes;		//execute function "Show_me_some_Attributes" if user scrolls
		window.onresize = Show_me_some_Attributes;      //execute function "Show_me_some_Attributes" if user resizes window</script>

The condition that has to be met for the pop up to show is: if ((window.innerHeight + window.pageYOffset)+1>= document.body.scrollHeight). Play with the window and resize it (in height and width) to get a feel for the values which are visible in the table. Resizing the window vertically will result in a different innerheight, resizing horizontally will affect the scrollHeight.

scrollHeight: innerHeight: pageYOffset + innerheight: pageYOffset:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Sed diam lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Sed diam Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Sed diam Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Scriptum javae idoneum est.

Are you on your way?

Primitivecode ist Grammatik pur. Aber Programmieren kommt auch nicht zu kurz, denn die Seite mache ich allein. Informationen zum Datenschutz findest du hier.