JSFiddle - React, Tailwind, and code Playground

by junhui

HTML

<header>
  <section>header</section>
</header>
<div id="wrap">
  <nav>
    nav<br> nav
    <br> nav
    <br> nav
    <br> nav
    <br> nav
    <br> nav
    <br> nav
    <br>
  </nav>
  <main>
    <div>
      content top
    </div>
    content bottom</main>
</div>
<footer>
  <div id="topFooter">
    top footer
  </div>
  <div id="bottomFooter">
    bottom<br> bottom
    <br> bottom
  </div>
</footer>

CSS

body {
  margin: 0;
  padding: 0
}

/* HEADER */

header {
  /* Needs to match header section height */
  margin-bottom: 50px;
}

header section {
  background: pink;
  
  /* needs to match header margin-bottom */
  height: 50px;
  
  /* stick to top of viewport */
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1
}

/* NAV */

#wrap {
  /* to cover #bottomFooter */
  background: white;
  
  /* nav on left, content on right */
  display: flex;
}

nav {
  background: #EEE;
  width: 200px;
  
  /* fill left column */ 
  height: 100vh;
  
  position: -webkit-sticky;
  position: sticky;
  top: 50px; /* needs to match header section height */
}

main {}

main div {
  /* arbitrary to gain more footer height to demonstrate nav scrolling */
  height: 800px
}

/* FOOTER */

#topFooter {
  background: grey;
  /* arbitrary to gain more footer height to demonstrate nav scrolling */
  height: 200px;
}

footer {
  /* needs to match #bottomFooter height */
  margin-bottom: 50px;
}

#bottomFooter {
  background: black;
  color: white;
  
  /* needs to match footer margin-bottom */
  height: 50px;

  /* stick to bottom of viewport */
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: -1;
}