JSFiddle - React, Tailwind, and code Playground

by Douglas Crosby

HTML

<div id="lookInMe">
    <div class="peek"></div>
    <div class="peek"></div>
    <div class="peek"></div>
    <div class="peek"></div>
    <div class="peek"></div>
    <div class="peek"></div>
    <div class="peek"></div>
    <div class="peek"></div>
    <div class="peek"></div>
    <div class="peek"></div>
    <div class="peek"></div>
    <div class="peek"></div>
    <div class="peek"></div>
</div>

CSS

body{
    height:100%;
    background:#ccc;
}
#lookInMe{
    margin:auto;
    width:80%;
    height:200px;
    border:1px solid #bbb;
    background:#fff;
    overflow-y:auto;
    overflow-x:hidden;
}
.peek{
    height:125px;
    width:90%;
    margin:auto;
    border:1px solid #666;
}
/* Move top one above the page */
.peek:nth-child(1){
    margin-top:-200px;
}
/* Move 5th one left of the page */
.peek:nth-child(5){
    margin-left:-110%;
}
/* Move 6th one right the page */
.peek:nth-child(6){
    margin-left:110%;
}

JavaScript

/*
 * Modified by DACrosby based on:
 *
 * Viewport - jQuery selectors for finding elements in viewport
 *
 * Copyright (c) 2008-2009 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *  http://www.appelsiini.net/projects/viewport
*/

(function($) {
    
    $.belowthefold = function(lookIn, elements, settings) {
        var fold = $(lookIn).height() + $(lookIn).scrollTop();
        console.log(elements);
        return $(elements).filter(function(){
            return fold <= $(this).offset().top - settings.threshold;
        });
    };
    
    $.abovethetop = function(lookIn, elements, settings) {
        var top = $(lookIn).scrollTop();
        return $(elements).filter(function(){
            return top >= $(this).offset().top + $(this).height() - settings.threshold;
        });
    };
    
    $.rightofscreen = function(lookIn, elements, settings) {
        var fold = $(lookIn).width() + $(lookIn).scrollLeft();
        return $(elements).filter(function(){
            return fold <= $(this).offset().left - settings.threshold;
        });
    };
    
    $.leftofscreen = function(lookIn, elements, settings) {
        var left = $(lookIn).scrollLeft();
        return $(elements).filter(function(){
            return left >= $(this).offset().left + $(this).width() - settings.threshold;
        });
    };
    
})(jQuery);

// Call it
$.belowthefold("#lookInMe", ".peek", {threshold : 0}).text("Below");
$.abovethetop("#lookInMe", ".peek", {threshold : 0}).text("Above");
$.leftofscreen("#lookInMe", ".peek", {threshold : 0}).text("Left");
$.rightofscreen("#lookInMe", ".peek", {threshold : 0}).text("Right");