Action at scroll end

This script generates an action 40px before you reach the end of the page when scrolling. The script is also performed when the entire content is displayed.

by scurrilus

HTML

<script src="http://www.scurrilus.de/jsfiddle/scurrilus-copyright.js"></script>
<link rel="stylesheet" href="http://www.scurrilus.de/jsfiddle/scurrilus-copyright.css">
<!--powered by SCURRILUS-->
<div id="scurrilusCopy"></div>
<script>scurrilusCopy();</script>
<!--end powered by SCURRILUS-->

<div class="code">
<div class="windowValues"><!-- Display values of window --></div>
<div class="statusOutput"><!-- return status --></div>
<div style="width: 200px; margin-top: 50px;"> <b>Please scroll to the end of the page, or magnify your browser window until you see the entire contents.</b><br><br> 
    
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. 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis...

CSS

p {
width: 200px;
}

.windowValues {
    width: 120px;
    height: 65px;
    background: #ccc;
    position: fixed;
    top: 140px;
    padding: 10px;
    right: 0;
}

.statusOutput {
    background: #666;
    position: fixed;
    top: 100px;
    left: 0;
    padding: 5px;
    width: 100%;
    font-size: 15px;
}

JavaScript

function scrollCheck() {      
    // check how far we have scrolled
    var currentScroll = $(document).scrollTop();
    // get height of the page 
    var totalHeightBody = document.body.scrollHeight;
    // get height of visible window content
    var visibleHeight = document.documentElement.clientHeight;
    
    // If scrolled is equal or greater to total, fire 40px before end of scroll
    var currentScrollHeight = currentScroll + visibleHeight + 40;
   
    if (totalHeightBody <= currentScrollHeight) {
         $('.statusOutput').html("Congratulations you have reached the end of the page.");
         $('.statusOutput').css("background", "#009200");
    } else {
    	$('.statusOutput').html("The end of the page is not displayed.");
        $('.statusOutput').css("background", "#cc0000");
    }
    
    // output Container values 
    var output = "currentScroll: " + currentScroll + "<br>totalHeightBody: " + totalHeightBody + "    <br>visibleHeight: " + visibleHeight + "<br><br>" + totalHeightBody + " = " + currentScrollHeight;
    
    $('.windowValues').html(output);
}