Stop primary slide animation for secondary only

Question

I managed to get the look that I want for my navigator, my problem is that I do not want nav to go up in the first state, when you update, you can see the first navigation slide real fast, I want it to go up from the site, then navigation with a background slide, and then slides back to scroll, but navigation 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 may be the beginning ...

Looking at the source code of your example on the site, there are two elements, both of which contain a “header”. I reproduced this 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 body's .scrollTop reaches 86px, the header height appears, a black fixed header.

Hope this helps. Good luck