JSFiddle - React, Tailwind, and code Playground

by sllnJin

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div id="wrapper">
    <div id="header">
        <ol>
            <li>Home</li>
            <li>Documentation</li>
            <li>Download</li>
            <li>Support</li>
        </ol>
    </div>
    <div id="content" class="col-md-8">
        <article id="article-1" class="post">
             <h3>Article 1</h3>

            <p id="test">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque ornare justo. Nam non erat orci. Integer pharetra turpis sed placerat suscipit. Etiam tincidunt arcu dolor, vel mollis nisi egestas in. Pellentesque pretium pulvinar justo, sed tristique dui tempor et. Nulla non consequat velit, at sodales libero. In tincidunt ligula non cursus hendrerit. Pellentesque pharetra ipsum eget fringilla commodo. Fusce sollicitudin convallis metus, non feugiat nibh dictum quis. Curabitur a rutrum quam, non accumsan nibh.</p>
            <p>Maecenas id neque faucibus, blandit risus luctus, varius metus. Integer quis blandit elit, et commodo urna. Aliquam tincidunt sapien sed metus laoreet, at venenatis odio ultrices. Duis eu dignissim risus. Proin erat risus, viverra sed pulvinar in, euismod vitae velit. Nam eget erat justo. Morbi tincidunt nisi in justo luctus dapibus. Ut aliquam a massa at facilisis. Vestibulum ultrices urna sit amet lorem lobortis tempor. Maecenas commodo mauris eu ipsum vulputate dapibus. Aenean ac volutpat metus. Curabitur eget auctor mi. Proin egestas libero at est laoreet, ac iaculis dui scelerisque. Maecenas tristique varius risus vitae tincidunt. Sed fermentum libero eu risus bibendum, ac rhoncus nisl vulputate.</p>
        </article>
        <article id="article-2" class="post">
             <h3>Article 2</h3>

            <p>Proin sed neque hendrerit ligula consequat iaculis eu non est. In consectetur vel sem eget tincidunt. Donec et lacinia leo. Nam sed est neque. Quisque in libero vel nisl...

CSS

#debug-box {
    position: fixed;
    top: 40px;
    right: 0;
    padding: 5px;
    padding-bottom: 15px;
    text-align: center;
    width: 250px;
    background-color: #606060;
    opacity: 0.9;
}
#debug-box > * {
    margin: 0;
    font-weight: 600;
    color: #F0F0F0;
}
#debug-box > h4 {
    font-size: 16px;
    margin-top: 15px;
}
#debug {
    font-size: 12px;
}
#debug td {
    width: 120px;
    text-align: center;
}
#debug td.text {
    width: 120px;
    text-align: right;
}
#detector {
    display: block;
    position: fixed;
    width: 10px;
    height: 10px;
    background-color: #F05050;
    border-radius: 5px;
    z-index: -1;
}
.switch, .cutoff {
    padding: 4px 12px;
    background-color: #303030;
    border-radius: 5px;
    opacity: 0.5;
    z-index: 5;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.switch:hover {
    cursor: pointer;
}
.active {
    opacity: 1 !important;
}

JavaScript

jQuery(document).ready(function () {
    var DEBUG = true;
    var SWITCH_ON = true;

    var DETECTION_MARGIN_TOP = 30;
    var DETECTION_MARGIN_SIDE = 60;

    // Preserves displacement of detected node to the top of viewport
    var CUTOFF_ADJUST = true;

    var detectedNode = new Node();

    function Node() {
        var that = this;

        this.element = null;
        this.name = function () {
            return this.element.tagName;
        };
        this.height = function () {
            return $(this.element).height();
        };

        this.documentOffset = {
            top: function () {
                return Math.round($(that.element).offset().top);
            },
            bottom: function () {
                return this.top() + that.height();
            }
        };
        this.viewportOffset = {
            oldTop: 0,
            oldBottom: 0,

            top: function () {
                this.oldTop = that.documentOffset.top() - $(window).scrollTop();
                return this.oldTop;
            },
            bottom: function () {
                this.oldBottom = that.documentOffset.bottom() - $(window).scrollTop();
                return this.oldBottom;
            }
        };

        this.wasBelowViewportTop = function () {
            if (this.viewportOffset.oldTop >= 0) {
                return true;
            }
            return false;
        };
    }

    $(window).load(function () {
        updateNode(detectedNode);
    });
    $(window).scroll(function () {
        updateNode(detectedNode);
    });
    $(window).resize(function () {
        if (SWITCH_ON && detectedNode.element) {
            var scrollAmount = detectedNode.documentOffset.top();

            if (CUTOFF_ADJUST) {
                if (detectedNode.wasBelowViewportTop()) {
                    scrollAmount -= detectedNode.viewportOffset.oldTop;
                } else {
                    scrollAmount = detectedNode.documentOffset.bottom();
           ...