JSFiddle - React, Tailwind, and code Playground

by Denis Ineshin

HTML

<div class="content js-content">
    <div class="content-left">
        <div class="content-left-parallax js-parallax">
            <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
            <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
            <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы...

CSS

body {
    margin: 0;
    height: 100%;
}

p {
    margin: 0;
    padding: 10px 25px;
}

.content {
    display: table;
    width: 100%;
}

.content-left {
    position: relative;
    display: table-cell;
    width: 25%; height: 100%;
    overflow: hidden;
}
.content-right {
    position: relative;
    width: 75%; height: 100%;
    display: table-cell;
    background: #eee;
}
.content-left-parallax {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    font-size: 13px;
}

JavaScript

var $win = $(window),
    $content = $(".js-content"),
    $parallax = $content.find(".js-parallax"),
    baseHeight = $content.outerHeight(),
    maxScroll = baseHeight - $win.innerHeight(),
    parallaxHeight = $parallax.outerHeight(),
    parallaxDiff = parallaxHeight - baseHeight,
    scrollTop, scrollPercent, parallaxTop;

$win.on("scroll", function () {
    scrollTop = $win.scrollTop();
    scrollPercent = scrollTop / maxScroll * 100;
    
    parallaxTop = parallaxDiff / 100 * scrollPercent;
    $parallax[0].style.top = -parallaxTop + "px";
});