JSFiddle - React, Tailwind, and code Playground

by Linda Rian

HTML

<header></header>

<div class='wrap'>
    <div class='right'> <span id='resize'>Тыкни чтоб поиграть с размером</span>

    </div>
    <div class='left'>
        <div class='addict'> <span id='close'>Тыкни чтоб закрыть</span>

        </div>
        <div class='main'> <span id='open'>Тыкни чтоб открыть</span>

        </div>
    </div>
    <div class='center'>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat mi eget magna pretium, ac pulvinar nulla condimentum. Donec iaculis dignissim tellus, id hendrerit arcu tincidunt sed. Donec accumsan felis massa, eu suscipit ante mollis nec. Aliquam arcu lectus, fringilla vel tempus a, cursus a sapien. Morbi vel feugiat ex. Etiam ut metus ultrices, aliquam ante id, volutpat tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse et diam nec lectus cursus maximus quis in mi. Aliquam sodales tortor sit amet ultricies molestie. Cras eu mauris at felis pretium tempor vel sit amet enim. Aenean sit amet aliquam augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam id scelerisque purus. Ut venenatis pulvinar ipsum nec ornare. Nam eleifend dolor nec diam sodales fermentum. Sed eu dignissim erat. Pellentesque ac auctor ligula. Suspendisse feugiat at tellus vel efficitur. Duis sit amet nulla ac diam laoreet gravida. Praesent pharetra convallis odio, at accumsan orci lacinia in. Integer sed libero tincidunt, elementum orci ut, consequat sem. Maecenas ornare venenatis enim ac luctus. Integer purus risus, bibendum a condimentum at, aliquet a orci. Fusce at ultrices justo, et tempor nisi. Pellentesque maximus tincidunt sodales. Phasellus consequat sollicitudin porttitor. Aliquam erat volutpat. Etiam vehicula dolor nec condimentum ullamcorper. Cras condimentum semper dui, ac convallis mauris vestibulum sit amet. Donec euismod tincidunt elit. Pellentesque elit mauris, tristique eget est sed, fringilla faucibus risus....

CSS

html, body {
    height: 100%;
    margin: 0;
}
.wrap {
    width: 100%;
    height: 2000px;
    background-color: green;
    overflow: hidden;
    background-color: #e2e2e2;
}
.right {
    float: right;
    width:240px;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    transition: 0.3s all;
}
.right.wide {
    width: 340px
}
.left {
    float: left;
    height: 100%;
}
.center {
    margin: 0 240px;
    background-color: #f2f2f2;
    height: 100%;
    transition: 0.3s all;
    padding: 15px;
    box-sizing: border-box;
}
.center.resize {
    margin-left: 590px;
}
.center.resize2 {
    margin-right: 340px;
}
.main {
    float: left;
    width:240px;
    height: 100%;
    z-index: 100;
    position: relative;
    padding: 15px;
    box-sizing: border-box;
    background-color: #e2e2e2;
}
.addict {
    float: left;
    height: 100%;
    width:240px;
    background-color: #d2d2d2;
    transition: 0.3s all;
    overflow: hidden;
    position: absolute;
    left: 0;
    padding: 15px;
    box-sizing: border-box;
}
.addict.opened {
    left: 240px;
    width: 350px;
}
p {
    margin: 0;
    padding: 0;
}
span:hover {
    cursor: pointer;
    text-decoration: underline;
}

header{
            text-align: center;
            font-size: 72px;
            line-height: 108px;
            height: 108px;
            background: #335C7D;
            color: #fff;
            font-family: 'PT Sans', sans-serif;
            
            // set animation
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
        
        header.sticky {
            position: fixed;
            font-size: 24px;
            line-height: 48px;
            height: 48px; 
            width: 100%;
            background: #efc47D;
            text-align: left;
            padding-left: 20px;
    z-index:1000;
        }

JavaScript

$(document).ready(function () {
    $('#open').click(function () {
        $('.addict').addClass('opened');
        $('.center').addClass('resize');
    });

    $('#close').click(function () {
        $('.addict').removeClass('opened');
        $('.center').removeClass('resize');
    })

    $('#resize').click(function () {
        if ($('.right').hasClass('wide')) {
            $('.right').removeClass('wide');
            $('.center').removeClass('resize2');
        } else {
            $('.right').addClass('wide');
            $('.center').addClass('resize2');
        }
    });
})

$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('header').addClass("sticky");
    }
    else{
        $('header').removeClass("sticky");
    }
});