"ava-l1-tester"
Bootstrap 3.3.0 Snippet by blahblahyaya

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse" data-parent="accordian-3"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.avalara.local/eu/en">Avalara EU [local]</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div id="l1-navbar" class="collapse navbar-collapse navbar-ex1-collapse"> <ul id="menu-main-eu" class="l1-menu nav navbar-nav"><li id="menu-item-232" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-232 dropdown"><a title="Products" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Products <span class="caret"></span></a> <ul role="menu" class=" dropdown-menu"> <li id="menu-item-235" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-235"><a title="AvaTax for VAT" href="#">AvaTax for VAT</a></li> <li id="menu-item-236" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-236"><a title="TrustFile Bharat" href="#">TrustFile Bharat</a></li> <li id="menu-item-237" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-237"><a title="Integrations" href="#">Integrations</a></li> </ul> </li> <li id="menu-item-234" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-234 dropdown"><a title="Resources" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Resources <span class="caret"></span></a> <ul role="menu" class=" dropdown-menu"> <li id="menu-item-238" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-238"><a title="Whitepapers" href="#">Whitepapers</a></li> <li id="menu-item-239" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-239"><a title="Blog" href="#">Blog</a></li> <li id="menu-item-233" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-233"><a title="GST News" href="#">GST News</a></li> <li id="menu-item-240" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-240"><a title="Case Studies" href="#">Case Studies</a></li> </ul> </li> <li id="menu-item-231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-231"><a title="About" href="http://www.avalara.local/eu/en/about-avalara/">About</a></li> </ul> </div> </nav> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia rhoncus eros, in venenatis leo vestibulum et. Maecenas consequat convallis purus, quis tincidunt nisl ultrices eu. Proin cursus lectus sapien, nec ultricies elit dapibus sit amet. Etiam varius laoreet nulla sit amet pharetra. In porta vulputate elit, sed condimentum quam imperdiet quis. Nunc egestas arcu eu neque dapibus ornare. Maecenas vitae velit nec est malesuada dictum at quis elit. Duis hendrerit magna nec turpis rhoncus elementum. </p> <p> Donec mattis mauris cursus orci condimentum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eget rhoncus odio. Maecenas fermentum faucibus felis, in egestas turpis placerat id. Duis posuere sit amet lorem sit amet consectetur. Etiam dignissim finibus dapibus. Quisque est turpis, rhoncus sit amet lorem at, fringilla sollicitudin velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed volutpat erat augue, at lacinia velit tincidunt non. Suspendisse nec semper lorem. Sed aliquet nulla vitae finibus venenatis. Donec iaculis aliquet risus, porttitor vehicula eros maximus eget. Donec felis orci, dictum sodales lacus eu, tristique luctus turpis. Nam vel finibus nisi, ac dignissim purus. Aliquam vel ex sed diam tincidunt fermentum in in tortor. Donec vehicula nisi efficitur faucibus condimentum. </p> <p> Nam malesuada turpis odio, at placerat nunc condimentum ut. Donec eros odio, pretium nec venenatis vel, ornare id arcu. Ut interdum lectus vel congue malesuada. Ut rutrum dictum elit vitae sollicitudin. Curabitur viverra tristique ipsum sit amet porta. Suspendisse potenti. Phasellus vitae libero posuere, tristique quam nec, feugiat diam. Suspendisse dictum aliquet lobortis. In varius, justo quis accumsan iaculis, erat nunc suscipit sem, vitae accumsan elit ex at neque. Proin sed massa maximus, ornare purus cursus, finibus odio. Nunc nec enim in elit volutpat pharetra ut eget diam. In vitae tortor sed risus porta tempus a vitae quam. Mauris justo neque, facilisis in finibus ut, luctus a magna. Phasellus feugiat convallis lorem, sit amet lobortis lacus luctus sed. </p> <p> Vivamus a imperdiet dui, non ultrices tellus. Ut at sem diam. Cras molestie nisi eros, sed luctus erat rutrum nec. Cras eget faucibus diam. Aenean ultrices bibendum tortor, vel dapibus nibh facilisis vitae. Nullam a placerat erat. Nunc urna turpis, eleifend at erat ac, tristique blandit purus. Proin scelerisque ipsum sit amet sagittis vestibulum. Donec vitae tristique lorem, sit amet rutrum tellus. Sed id odio volutpat, efficitur nunc quis, aliquet arcu. Vivamus et augue non dolor interdum dapibus et ullamcorper enim. Etiam vel efficitur metus. Cras pellentesque bibendum lacus sodales luctus. Curabitur in commodo elit. Etiam lectus felis, faucibus sed nunc a, mollis ornare est. Duis consequat id dolor ac mattis. </p> <p> Nullam feugiat nisl et gravida feugiat. Praesent ipsum neque, aliquet vel magna rhoncus, euismod tempor felis. Sed accumsan feugiat finibus. In vitae elit euismod, consectetur dolor vitae, maximus felis. Nulla condimentum eleifend nunc, id malesuada metus hendrerit eget. Integer facilisis dui urna, nec molestie erat ornare at. Proin eget urna at metus tempus molestie. In efficitur felis quis nulla vulputate pharetra. Phasellus finibus justo vel nisl varius fermentum. </p></div>
#l1-navbar { background-color: #ff6600; font-family: 'freight-sans-pro', Arial, sans-serif; font-weight: 400; z-index: 1500; margin-bottom: -80px; box-shadow: 0 2px 3px rgba(0,0,0,.4); } .navbar { position: relative; min-height: 50px; margin-bottom: 0px; border: none; } .navbar-default .navbar-nav > li > a { color: #ffffff; } .l1-menu.navbar-nav > li > a { color: #ffffff; } .content { min-height: 400px; background-color: #999; } nav, .main-nav-scrolled { position: fixed; width: 100%; top: 0; }
var mn = $(".main-nav"); mns = "main-nav-scrolled"; hdr = $('nav').height(); $(window).scroll(function() { if( $(this).scrollTop() > hdr ) { mn.addClass(mns); } else { mn.removeClass(mns); } });

Related: See More


Questions / Comments: