JSFiddle - React, Tailwind, and code Playground

by mgoetzke

HTML

<body>
    
    <div class="page-header">
      APPLICATION HEADER: Independent of scroll layout<br>
      asdasd
    </div>

    <rs-scroll-layout class="main-content-area" __disabled__dont-use-fixed>
      <div class="content-header" rs-scroll-layout-slide>
        CONTENT HEADER
      </div>
      <div class="hero-image" rs-scroll-layout-shrink='{minHeight: 24}'>
      </div>
      <div class="toolbar-header" rs-scroll-layout-slide>
        Toolbar Header
      </div>
      <div class="toolbar" rs-scroll-layout-snap __disabled__rs-scroll-layout-no-style >
        <button>Do something</button>
        <button>Do something else</button>
        <button>Do something more</button>
      </div>
      <section>
        <h4>This is my content area</h4>

        <p>"'Twill hold, old gentleman. Long heat and wet, have they spoiled thee? Thou seem'st to hold. Or, truer perhaps, life holds thee; not thou it."</p>

        <p>"I hold the spool, sir. But just as my captain says. With these grey hairs of mine 'tis not worth while disputing, 'specially with a superior, who'll ne'er confess."</p>

        <p>"What's that? There now's a patched professor in Queen Nature's granite-founded College; but methinks he's too subservient. Where wert thou born?"</p>

        <p>"In the little rocky Isle of Man, sir."</p>

        <p>"Excellent! Thou'st hit the world by that."</p>

        <p>"'Twill hold, old gentleman. Long heat and wet, have they spoiled thee? Thou seem'st to hold. Or, truer perhaps, life holds thee; not thou it."</p>

        <p>"I hold the spool, sir. But just as my captain says. With these grey hairs of mine 'tis not worth while disputing, 'specially with a superior, who'll ne'er confess."</p>

        <p>"What's that? There now's a patched professor in Queen Nature's granite-founded College; but methinks he's too subservient. Where wert thou born?"</p>

        <p>"In the little rocky Isle of Man, sir."</p>

        <p>"Excellent! Thou'st hit the world by...

CSS

* {
        box-sizing: border-box;
        -ms-overflow-style:scrollbar;
      }

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

        display: -webkit-flex;
        display: flex;
        flex-direction: column;
      }

      .page-header {
        background: lightblue;
        border-bottom: 1px solid black;

        padding: 10px;

        display: block;
      }

      .main-content-area {
        background: lightgray;
        border: 1px solid yellow;
        flex: 1;
        overflow: auto;
        position: relative;
      }

      .content-header {
        height: 84px;
        background-color: blue;
        color: white;
        border: 1px solid white;

        padding: 10px;
      }

      .hero-image {
        background-origin: center;
        background-position: center;
        background-size: cover;
        background-image: url('http://placehold.it/350x150');
        background-repeat: no-repeat;
        height: 250px;
      }

      .toolbar-header {
        height: auto;
        background-color: red;
        color: white;

        padding: 10px;
        height: 28px;
      }

      .toolbar {
        height: auto;
        background-color: red;
        color: white;

        padding: 10px;
        height: 48px;
      }

      rs-scroll-layout {
        /*opacity: 1;*/       
      }