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.
(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>1 Answers
Answers 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!
0 comments:
Post a Comment