JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<main>
    <div class="overflow-x-hidden">
      <h1>I want to be sticky!</h1>
      <div class="sidenav"></div>
      <div class="tall"></div>
    </div>
  </main>

CSS

body {
  overflow-x: hidden;
  position: relative;
}

.overflow-x-hidden {
  border: 1px solid blue;
}

h1 {
  background: palevioletred;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.tall {
  background: linear-gradient(to bottom, paleturquoise, white);
  height: 300vh;
  width: 100%;
}

.sidenav{
  width: 250px;
  height: 100%;
  background: black;
  position: absolute;
  right: 0;
  transform: translateX(100%)
}