JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<div id="wrapper">
    <div id="container">
        <div id="content">
            
        </div>
    </div>
    <div id="sidebar">SIDEBAR</div>
</div>

CSS

#wrapper {
    width: 500px;
    border: 1px solid #900;
}
#wrapper:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
#sidebar {
    float: left;
    width: 150px;
    height: 300px;
    margin-left: -100%;
    position: relative;
    background: #ccc;
}
#container {
    width: 100%;
    float: left;
    overflow: hidden;
}
#content {
    padding: 0 0 0 155px;
}
.cl {
    clear: both;
}
span {
    position: fixed;
    left: 500px;
    top: 0;
}

JavaScript

// Блок контента (тело, которое растягиваем)
var contBlock = $('#content'); 
// Сайдбар (тот, который убираем)
var sideBlock = $('#sidebar'); 
// Вычисляем нижнюю грань сайбара 
// сколько пикселей сверху до блока + его высота
var botPos = sideBlock.offset().top + sideBlock.height(); 
// вешаем событие скрола на документ
$(document).scroll(function(){
    var scrollPos = $(this).scrollTop(); // узнаем, сколько PX прокручено
    // если пикселей прокручено больше, чем вычисленная грань сайдбара
    if(scrollPos > botPos - 100){
        contBlock.css('padding-left', '0'); // убираем паддинг слева у теля
        sideBlock.hide(); // прячем сайдбар
    } else { // если пикселей прокручено меньше
        contBlock.css('padding-left', '155px'); // возвращаем изначальное значение паддинга
        sideBlock.show(); // возвращаем блок сайдбара
    }
});










// ---- ЭТО ТОЛЬКО ДЛЯ ЗАПОЛНЕНИЯ ТЕЛА (НЕ ОБРАЩАЕМ ВНИМАНИЯ)

var str = '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';
var txt = '';
for(var i = 0; i < 10; i++){
    txt += str;
}
$('#content').html(txt);