sticky nav

css.sass

.productSubNavContainer{
	height:44px;
	box-shadow:inset 0 1px 0 0 rgba(0,0,0,0.1);
	background-color:#D6D9DC;
}
.productSubNav{
	&.fixed{
		@include z-position(fixed,0px,0px,0,0px);
		box-shadow:inset 0 1px 0 0 rgba(0,0,0,0.1);
		background-color:#D6D9DC;
	}
	ul{
		@extend %siteWidth;
		font-size:0;
	}
	li{
		display:inline-block;
	}
	li+li{
		border-left:1px solid #ABAEB0;
	}
	a{
		font-size:14px;
		line-height:45px;
		color:#3F5364;
		display:block;
		height:44px;
		padding:0 12px;
		&:hover,&.active{
		}
	}
}

html.html

<div class="productSubNavContainer">
  <nav class="productSubNav">
    <ul>
      <li><a href="#Products" class="active">Products</a></li>
    </ul>
  </nav>
</div>

js.js

//requires helpers.js
if(zQ('.productSubNavContainer')){
	window.onscroll=function(){
		var aboveHeight=131;
		var windowScrollPosition=document.body.scrollTop||document.documentElement.scrollTop;
		if(windowScrollPosition>aboveHeight){zAddClass(zQ('.productSubNav'),'fixed');}
		else{zRemoveClass(zQ('.productSubNav'),'fixed');}
	}
}