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%;
    padding-top: 150px;
    height: auto;
    background: pink;
}
.project-content:last-child {
    background: orange;
}
.project-content-title {
    position: absolute;
    width: auto;
    height: auto;
    left: 40px;
    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

$(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);
}





function stickyText() {

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

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

        projectOffset = $(this).offset().top;
        projectHeight = $(this).height();
        textHeight = $(this).children('.project-content-title').height();
        posPoint = projectOffset + projectHeight - textHeight + 150;
        imagesHeight = $(this).children('.images').outerHeight(true);

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

                if (posPoint > viewportOffset) {
                    $(this).children('.project-content-title').css('top', '150px').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', 'absolute');
            }
        }
    });
}



$(window).scroll(function () {

    // run functions on scroll
    stickyText();

});