Stop Primary Slide Animation only for secondary

Question

I have managed to get the look and feel I want for my nav, my issue is when I don't want the nav to slide up on the first state when you refresh you can see the first nav slide real quick I want it to go up with the site then the nav with a background slides in then slide back up on scroll but the nav that has no background I don't want to slide at all.

Example

(function($) {
  var header = $('.siteHeader');

  $(window).scroll(function() {
    if ($(this).scrollTop() > 300) {
      header.addClass('fixed active').off('transitionend');		
    } else if (header.hasClass('active')) {
      header.removeClass('active').one('transitionend', function() {
        header.removeClass('fixed');
		  header.addClass('active');
      });
    }
  }).scroll();

})(jQuery);

$(window).resize(function() {	  
    $('.siteHeader').addClass('active');
	$('.siteHeader').removeClass('fixed');
});

$(document).ready(function(){
    $(this).scrollTop(0);   
    $('.siteHeader').addClass('active');
});

.headerNav {
	height: auto;	
	float: right;
	margin: 0px;
}
.headerNav ul li {
	display: inline-block;
	margin-left: 40px;
}

.siteHeader {
	height: 86px;
	position: absolute;
	width: 100%;
	z-index: 11;
	background-color: red;
	-webkit-transition: -webkit-transform .3s;
	transition: transform .3s;
	-moz-transform: translateY(-86px);
	-ms-transform: translateY(-86px);
	-webkit-transform: translateY(-86px);
	transform: translateY(-86px);
}

.siteHeader.fixed {
	width: 100%;
	height: 66px;
	position: fixed;
	top: 0px;
	background-color: #000;
	-moz-transform: translateY(-130px);
	-ms-transform: translateY(-130px);
	-webkit-transform: translateY(-130px);
	transform: translateY(-130px);
	transition: transform .3s;
}

.siteHeader.active {
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	transition: transform .3s;
}

.siteHeader.fixed.active {
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	transition: transform .3s;
}

.main{
background-color: grey;
height: 1500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<div class="siteHeader">
		  <nav class="headerNav">
			<ul>
				<li><a href="">Link</a></li>
				<li><a href="">Link</a></li>
				<li><a href="">Link</a></li>
				<li><a href="">Link</a></li>
			</ul>  	
		</nav>  
	</div>
  
  <div class="main">Content</div>

Answer 1

I think this might be a start...

Looking at your example website's source code, there are 2 elements, both containing the "header". I replicated that idea in this jsfiddle.

(function($) {
  var header = $('.siteHeader');

  $(window).scroll(function() {
    if ($("body").scrollTop() > 86) {
      header.addClass('fixed active').off('transitionend');
    } else if (header.hasClass('active')) {
      header.removeClass('active').one('transitionend', function() {
        header.removeClass('fixed');
        header.addClass('active');
      });
    }
  }).scroll();

})(jQuery);

$(window).resize(function() {
  $('.siteHeader').addClass('active');
  $('.siteHeader').removeClass('fixed');
});

$(document).ready(function() {
  $(this).scrollTop(0);
  $('.siteHeader').addClass('active');
});

body {
  padding: 0;
  margin: 0;
}

.headerNav {
  height: auto;
  float: right;
  margin: 0px;
}

.headerNav ul li {
  display: inline-block;
  margin-left: 40px;
}

.siteHeader,
.siteHeaderNoFloat {
  height: 86px;
  top: 0;
  width: 100%;
  background-color: red;
}

.siteHeader {
  position: absolute;
  z-index: 11;
  -moz-transform: translateY(-86px);
  -ms-transform: translateY(-86px);
  -webkit-transform: translateY(-86px);
  transform: translateY(-86px);
}

.siteHeader.fixed {
  -webkit-transition: -webkit-transform .3s;
  transition: transform .3s;
  width: 100%;
  height: 66px;
  position: fixed;
  top: 0px;
  background-color: #000;
  -moz-transform: translateY(-130px);
  -ms-transform: translateY(-130px);
  -webkit-transform: translateY(-130px);
  transform: translateY(-130px);
  transition: transform .3s;
}


/*.siteHeader.active {
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  transition: transform .3s;
}*/

.siteHeader.fixed.active {
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  transition: transform .3s;
}

.main {
  background-color: grey;
  height: 1500px;
  padding-top: 86px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="siteHeaderNoFloat">
  <nav class="headerNav">
    <ul>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
    </ul>
  </nav>
</div>

<div class="siteHeader">
  <nav class="headerNav">
    <ul>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
    </ul>
  </nav>
</div>

<div class="main">
  Content
</div>

When the .scrollTop of the body reaches 86px, the height of the header, the black fixed header shows up.

Hopefully this helps. Good luck!