JSFiddle - React, Tailwind, and code Playground

by Rozina Szogyenyi

HTML

<nav>
  <ul>
    <li>Nav Item 1</li>
    <li>Nav Item 2</li>
    <li>Nav Item 3</li>
    <li>Nav Item 4</li>
    <li>Nav Item 6</li>
    <li>Nav Item 7</li>
    <li>Nav Item 8</li>
    <li>Nav Item 9</li>
    <li>Nav Item 1</li>
    <li>Nav Item 2</li>
    <li>Nav Item 3</li>
    <li>Nav Item 4</li>
    <li>Nav Item 6</li>
    <li>Nav Item 7</li>
    <li>Nav Item 8</li>
    <li>Nav Item 9</li>
    <li>Nav Item 1</li>
    <li>Nav Item 2</li>
    <li>Nav Item 3</li>
    <li>Nav Item 4</li>
    <li>Nav Item 6</li>
    <li>Nav Item 7</li>
    <li>Nav Item 8</li>
    <li>Nav Item 9</li>
  </ul>
</nav>

<section>
  <p>Pug man bun listicle, fingerstache fam pickled hexagon messenger bag chillwave retro. Hella mixtape forage, meditation tacos twee venmo. Tousled franzen bitters, vexillologist sriracha yr XOXO chambray keytar kogi. Yr banh mi cardigan kale chips waistcoat tattooed truffaut hella synth. Prism gentrify humblebrag messenger bag iPhone. Shoreditch post-ironic schlitz irony tofu, kitsch poutine. Helvetica PBR&B gentrify twee dreamcatcher ethical beard kombucha, neutra organic vinyl cardigan craft beer. Kogi chillwave mustache affogato slow-carb biodiesel blog cold-pressed shaman church-key. Lomo swag palo santo locavore YOLO four loko. Beard tattooed poke meh. Vinyl pok pok chia freegan kinfolk dreamcatcher bicycle rights seitan. Chartreuse poke polaroid yuccie, umami food truck austin pour-over sustainable cloud bread. Keffiyeh cray narwhal knausgaard, sartorial swag seitan asymmetrical. YOLO listicle glossier viral godard, wayfarers put a bird on it dreamcatcher gastropub kickstarter disrupt chicharrones butcher poutine.</p>
  
  <p>+1 craft beer hammock slow-carb, taxidermy whatever blog cold-pressed gastropub health goth everyday carry. Tumblr cred green juice meggings pop-up typewriter kombucha hella fashion axe pickled. Tumeric twee pop-up hexagon bitters vaporware. Farm-to-table bespoke letterpress, direct trade kogi enamel pin pour-over truffaut migas...

CSS

* {font-family: 'Helvetica Neue', sans-serif; font-size: 13px; padding: 0; margin: 0;}

body.not-scroll {overflow: hidden;}
nav {
  position: fixed;
  background: #FFF;
  overflow-y: hidden;
  height: 100%;
}

nav.scroll {
  overflow-y: auto;
  -ms-overflow-style: none; overflow: auto;
}

nav.scroll::-webkit-scrollbar{
  display: none;
}

nav ul  {margin: 0; padding: 30px;}

nav ul li {
  list-style-type: none;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

section {
  padding: 30px;
  line-height: 160%;
}

JavaScript

$('nav').mouseover(function() {
	$(this).addClass('scroll');
  $('body').addClass('not-scroll');
}).mouseout(function(){
  $(this).removeClass('scroll');
  $('body').removeClass('not-scroll');;
});