JSFiddle - React, Tailwind, and code Playground

by Gaurav Singh

HTML

<div class="app">
     <h2>Using jQuery to detect bottom of document, then fade in a button</h2>

     <h1>&cuvee;</h1>

    <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
    <div class="button"> <a href="#">Button</a>

    </div>
</div>

CSS

body {
    background: #F1FFCF;
}
.app {
    background: #E0EDC1;
    width:320px;
    margin:0 auto;
    line-height:1.4em;
    font-size:18px;
    padding:20px;
}
p:first-line {
    font-weight:700;
    letter-spacing:1px;
    color: #6D993D;
}
h2 {
    font-weight:100;
    letter-spacing:1px;
    line-height:1.4em;
    text-align:center;
}
h1 {
    text-align:center;
    margin:50px 0;
    font-weight:100;
}
small {
    font-size:12px;
}
.button {
    width:100px;
    padding:15px;
    margin:0 auto;
    background:#6D993D;
    text-align:center;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
}
a {
    color:white;
    text-decoration:none;
}

JavaScript

var $window = $(window),
    $document = $(document),
    button = $('.button');

button.css({
    opacity: 1
});

$window.on('scroll', function () {
    if (($window.scrollTop() + $window.height()) == $document.height()) {
        button.stop(true).animate({
            opacity: 0
        }, 250);
    } else {
        button.stop(true).animate({
            opacity: 1
        }, 250);
    }
});