hide nav based on scroll removing adding classes

Question

I found a nav layout I would like to use but I seem to have run into 2 problems.

problem #1 the transitions in the css do not seem to be transitioning smooth when scrolling up or down.

problem #2 if the scroll position is not zero I do not want mainnav to shrink and i want the top nav to show or hide when i scroll up or down.. thats hard to word so what I am trying to accomplish exactly is the following

https://www.battlefield.com/games/battlefield-4/classes

now when you scroll down it hides the top nav but if you scroll just a little each way it will show or hide thats what I am trying to do.. but I dont want the 2nd nav to scale down unless the top is 0

$(window).scroll(function() {

  if ($(this).scrollTop() > 0) {
    $('.netnav').addClass('hide-nav');
    $('.netnav').removeClass('show-nav');
    $('.mainnav').addClass('scrolled');
   } 
   else {
    $('.netnav').addClass('show-nav');
    $('.netnav').removeClass('hide-nav');
    $('.mainnav').removeClass('scrolled');
   }
   
});

body {
  margin: 0px;
}

.hwrap {
  display: block;
  position: fixed;
  width: 100%;
}

.netnav {
  position: fixed;
  height: 40px;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: blue;
  z-index: 1;
}

.netnav.show-nav {
  top: 0;
  transition-duration: .4s;
}

.netnav.hide-nav {
  transform: translate3d(0, -40px, 0);
  transition-duration: .4s;
}

.mainnav {
  position: fixed;
  height: 68px;
  z-index: 3;
  background: blue;
}

.mainnav {
  border-radius: 4px;
  left: auto;
  margin: 0 auto;
  top: 50px;
  position: relative;
  transform: translateY(15px);
  transition: transform .3s, width .3s;
  width: calc(100% - 60px);
}

.mainnav.scrolled {
  top: 0;
  height: 60px;
  border-radius: 0;
  transform: translateY(0);
  width: 100%;
  transition: transform .3s, width .3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="hwrap">
  <div class="netnav">net nav</div>
  <div class="mainnav">main nav</div>
</header>

<div style="height: 100vh; display: block; background-color: gold">about</div>
<div style="height: 100vh; display: block; background-color: green">about</div>

Answer 1

Demo

http://jsfiddle.net/gos4hwp9/52/

Explanation

1. Added transition: all ease-in-out .4s for smooth transitions of all properties
2. If scrollTop > 0 added margin: 0px and border-radius: 0px to bottom (primary) nav, Else made margin and border-radius same as initial state
3. If scrollDir == "down" added translateY(-50px) to header, Else removed translateY
4. Moving the whole header will move both navs which is nice as compared to moving them individually

Answer 2

I followed the link you provided and edit the JavaScript and CSS.

Fixed the transitions in the CSS that does not seem smooth in transitioning when scrolling up or down using JavaScript.

You may visit this pen that I edited based on your snippet, and play around with it.

        $(window).scroll(function(){

        if ($(this).scrollTop() > 15) {
           $('.netnav').addClass('hide-nav');
           $('.netnav').removeClass('show-nav');
           $('.mainnav').addClass('RemoveTop');
        }
        else {
           $('.netnav').addClass('show-nav');
           $('.netnav').removeClass('hide-nav');
           $('.mainnav').removeClass('RemoveTop');
           $('.mainnav').removeClass('scrolled');  
        }
    });

    $(window).scroll(function(){

        if ($(this).scrollTop() > 50) {
           $('.mainnav').addClass('scrolled');
        }
        else {
           $('.netnav').removeClass('scrolled'); 
        }
    });

        body {
        margin: 0px;
    }


    .hwrap{
      display:block;
      position: fixed;
      width: 100%;
    }


    .netnav{		
      position: fixed;
      height: 40px;
      width: 100%;	
      margin: 0;
      padding: 0;
      background-color: blue;
      transition: all .3s;
      z-index: 1;
    }

    .netnav.show-nav {	
      top: 0;
      transition-duration: .4s;
    }

    .netnav.hide-nav {
      transform: translate3d(0,-40px,0);
      transition-duration: .4s;
    }

    .mainnav{
      position: fixed;
      height: 68px;	
      z-index: 3;
      background: blue;
    }

    .mainnav {
        border-radius: 4px;
        left: auto;
        margin: 0 auto;
        top: 50px;
        position: relative;
        transform: translateY(15px);
        transition: all .3s,width .3s;
        width: calc(100% - 60px);
    }

    .mainnav.RemoveTop {
      top: 0px;
    }


    .mainnav.scrolled {	
      height: 60px;
      border-radius: 0;
      transform: translateY(0);
      width: 100%;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<header class="hwrap">
	<div class="netnav">net nav</div>
	<div class="mainnav">main nav</div>
	</header>
	
	<div style="height: 100vh; display: block; background-color: gold">about</div>
	<div style="height: 100vh; display: block; background-color: green">about</div>

Answer 3

I've slightly changed your transitions and added transitions to the classes which you toggle.

body {
    margin: 0px;
}

.hwrap {
    display: block;
    position: fixed;
    width: 100%;
}

.netnav {
    position: fixed;
    height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: blue;
    z-index: 1;
    transition: .3s all;
}

.netnav.show-nav {
    top: 0;
    transition: .3s all;
}

.netnav.hide-nav {
    transform: translate3d(0, -40px, 0);
    transition: .3s all;
}

.mainnav {
    position: fixed;
    height: 68px;
    z-index: 3;
    background: blue;
}

.mainnav {
    border-radius: 4px;
    left: auto;
    margin: 0 auto;
    top: 50px;
    position: relative;

    transform: translateY(15px);
    transition: .3s all;
    width: calc(100% - 60px);
}

.mainnav.scrolled {
    top: 0;
    height: 60px;
    border-radius: 0;
    transform: translateY(0);
    width: 100%;
    transition: .3s all;
}