JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<nav>
    <div class="inside">
        <div class="logo">
            <img src="#">
        </div>
        <div class="links" id="getApp"> <a href="#"><img src="#"></a>

        </div>
    </div>
</nav>
<!-- Header -->
<header>
    <div class="container inside" id="top">
        <div class="intro-text">
            <div class="intro-lead-in">
                <!--PLAYER GOES HERE-->
                <div class="Player" style="position:relative;z-index:1;">
                    <div id="Videoplayer" class="videoConteiner">
                        <div id="rtv__play" class="rtv__play" style="display:none;z-index: 999999;"></div>
                        <div id="adcontainer" style="position:absolute;top:0;"></div>
                        <video id="content" style="z-index: 1; width: 100%"></video>
                        <div id="controls" class="timeline" style="display:none;">
                            <button id="playpause" class="play btn"></button>
                            <div id="timeTotal" class="time-total text">0:00</div>
                            <div id="timePlayed" class="time-played text">0:00</div>
                            <div class="slider">
                                <input id="timelineSlider" value="0" type="range">
                            </div>
                            <button id="muteBtn" class="mute btn"></button>
                            <button id="fullscreen" class="fullscreen btn"></button>
                        </div>
                        <img src="{{data.videos.img.uri}}" id="Thumbnail" style="position:absolute;top:0;left:0;z-index:0;" />
                        <div id="loadingLayer" class="rtv__loading"></div>
                    </div>
                </div>
                <!-- -->
                <div id="portfolio">
                    <!--<div class="container-fluid content-inner">-->
                    <div class="col-lg-12">
                        <div class="col-md-6 left-side">
                    ...

CSS

#top {
    height: 1200px;
    background-color: #eee;
}
.bottom {
    height: 800px;
    background-color: #000;
}

JavaScript

$(function () {
    var $win = $(window);

    $win.scroll(function () {
        if ($win.scrollTop() == 0) {
            console.log("USER SCROLLED TO TOP");
            mixpanel.track(
                "User Scrolled To Top", {
                "url": window.location.href
            });
        } else if ($win.height() + $win.scrollTop() >= $('#top').height() - 0 && $win.height() + $win.scrollTop() <= $('#top').height() + 0) {
            console.log("VIEWED BELOW THE FOLD");
            mixpanel.track(
                "User Scrolled Below the fold", {
                "url": window.location.href
            });
        } else if ($win.height() + $win.scrollTop() == $(document).height()) {
            console.log("USER SCROLLED TO BOTTOM");
            mixpanel.track(
                "User Scrolled To Bottom", {
                "url": window.location.href
            });
        }
    });

});


//Track Get App button clicked
mixpanel.track_links("#getApp a", "Get App Link Clicked", {
    "url": location.pathname
});

//Track Footer link clicks
mixpanel.track_links("#footerLinks a", "Web Share Page Footer Link", {
    "url": location.pathname
});

//Track Read More link clicked
mixpanel.track_links("#link a", "Read More Link", {
    "url": location.pathname
});

$('#controls, #playpause, #muteBtn, #fullscreen, #timelineSlider').mouseover(function () {
    mixpanel.track("Share Page Player Controls", {
        "Hovered": this.id
    });
});
$('#controls, #playpause, #muteBtn, #fullscreen, #timelineSlider').click(function () {
    mixpanel.track("Share Page Player Controls", {
        "Clicked": this.id
    });
});

$("#email").hide();
$(".iDevice").hide();
$(".android-device").hide();
$('#checkbox').change(function () {
    $('#email').slideToggle();
});

//IF WINDOWS PHONE
if (navigator.userAgent.match("MSIE")) {
    $(".iDevice").hide();
    $(".android-view").show();
    $(".desktop").hide();
}

//ELSE IF iPhone/iPad
else if ((navigator.platform === 'iPhone')...