JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div class="wrap">
    <section class="project-content selected">
        <div class="project-content-title">text</div>
        <div class="images">
            <div class="project-content-slide"></div>
            <div class="project-content-slide"></div>
            <div class="project-content-slide"></div>
        </div>
    </section>
    <section class="project-content">
        <div class="project-content-title">sdfskl</div>
        <div class="images">
            <div class="project-content-slide"></div>
            <div class="project-content-slide"></div>
            <div class="project-content-slide"></div>
        </div>
    </section>
</div>

CSS

.wrap {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
}
.project-content {
    position: relative;
    width: 100%;
    height: auto;
    background: pink;
}

.project-content:last-child {
    background: orange;
}
.project-content-title {
    position: absolute;
    width: auto;
    height: 315px;
    left: auto;
    font-size: 14px;
    line-height: 14px;
    text-transform: uppercase;
    color: #000000;
    z-index: 9999;
}
.project-content-slide {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    cursor: pointer;
    z-index: 3;
    border-bottom: 1px solid black;
}

JavaScript

$(document).ready(function () {

    $('.project-content-title').hide();

    setTimeout(function () {
        $('html, body').animate({
            scrollTop: 10
        }, 'slow');
    }, 1100);

    setTimeout(function () {
        $('.project-content-title').fadeIn('fast');
    }, 1500);

});



$(function () {

    Resize();
});

//Every resize of window
$(window).resize(function () {
    Resize();
});

//Dynamically assign height
function Resize() {
    // Handler for .ready() called.
    var windowHeight = $(window).height() + 'px';
    $('.project-content-slide').css('height', windowHeight);
}




$(document).ready(function () {
    function stickyText() {

        $('.project-content').each(function () {

            projectOffset = $(this).offset().top;
            projectHeight = $(this).height();
            textHeight = $(this).children('.project-content-title').height();
            halftextHeight = textHeight / 2;
            halfwindowHeight = $(window).height() / 2;
            paddingHeight = halfwindowHeight - halftextHeight;
            posPoint = projectOffset + projectHeight - textHeight + 0;
            imagesHeight = $(this).children('.images').outerHeight(true);

            viewportOffset = $(document).scrollTop() + 315;
            viewportHeight = $(window).height() - 315;

            if (textHeight < imagesHeight) {
                if (viewportOffset > projectOffset && viewportHeight > textHeight && imagesHeight > textHeight) {

                    if (posPoint > viewportOffset) {
                        $(this).children('.project-content-title').css('top', '315px').css('bottom', '').css('position', 'fixed');
                    } else {
                        $(this).children('.project-content-title').css('top', '').css('bottom', '0px').css('position', 'absolute');
                    }
                } else {
                    $(this).children('.project-content-title').css('top', '0px').css('bottom', '').css('position',...