JSFiddle - React, Tailwind, and code Playground

by Sean Cannon

HTML

<div class="item item1">
    <div class="header">Header 1</div>
    <div class="fixeditem">1</div>
</div>
<div class="item item2">
    <div class="header">Header 2</div>
    <div class="fixeditem">2</div>
</div>
<div class="item item3">
    <div class="header">Header 3</div>
    <div class="fixeditem">3</div>
</div>

CSS

html, body{
    height: 100%;
}

.item {
    min-height:100%;
    background-color: white;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.header {
    position: relative;
    background-color: green;
    padding: 5px;
    z-index: 2;
}

.fixeditem {
    position: relative;
    background-color: red;
    width: 300px;
    height: 200px;
    z-index: 0;
}

.item2 .fixeditem {
    background-color: yellow;
}

.item3 .fixeditem {
    background-color: blue;
}

JavaScript

$(function(){
    elem = $('.fixeditem');
    win  = $(window);
    wrap = $('<div>').css({
        width: elem.width(),
        height: elem.height()
    });
    elem.wrap(wrap);
    win.scroll(function() {
        elem.each(function(index, element){
            element = $(element);
            var offset = element.parent().offset().top;
            element.css('top', win.scrollTop() + 40 - offset);
        });
    });
});