JSFiddle - React, Tailwind, and code Playground

by masteram

HTML

<nav>
  <a href="">Page 1</a>
  <a href="">Page 2</a>
  <a href="">Page 3</a>
  <a href="">Page 4</a>
  <a href="">Page 5</a>
  <a href="">Page 6</a>
</nav>
<div style="height:9000px;"></div>

CSS

*{
  margin:0px;
}
nav {
  width:100%;
  list-style-type:none; 
  text-align:center;
  background-color:#242424;
  height:100px;
  line-height:100px;
  position:fixed;
}
a{
  /*text*/
    font-family:"calibri";
    color:#222;
    text-decoration:none;
    text-shadow:0px 2px 3px #555;
  /*position and size*/ 
    display:inline-block;
    width:6em;
    height:40px;
  /*box style */
    line-height:40px;
    background-color:#666659;
    border-radius:12px;
    /*effects*/
    transition:all 0.5s;
}
a:hover{
  /*text*/ 
    color:#aaa;
    text-shadow:0px 2px 3px #555;
  /*box style */
    background-color:#555568;
    border-radius:0px;
}

JavaScript

$('nav').data('size','big');

$(window).scroll(function(){
    var $nav = $('nav');
    var $a = $('nav > a');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size','small').stop().animate({
                height:40,
                line-height:40
            }, 300);
            $a.data('size','small').stop().animate({
                height:20
            }, 300);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size','big').stop().animate({
                height:100,
                line-height:40
            }, 300);
            $a.data('size','big').stop().animate({
                height:40
            }, 300);
            
            
        }  
    }
});