Now a days most of the sites are using this kind of nav bar, like when we are scrolling down hiding the menu nav bar, When we are scrolling up showing the menu nav bar, actually it is really nice one. here we are going to create like that kind of functionality only using jquery javascript and with Bootstrap menu. Let's see the code.

HTML CODE
<body> <header> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header">
.
.
<!-- Nav bar goes here... -->
.
. </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> </header> <div class="bodycontainer container"> Body Content Goes here... </div> <footer> <div class="container"> Footer Goes here.. </div> </footer> </body>
I have already posted bootstrap responsive menu nav bar. that code only i have used for this navigation bar.
SCRIPT FILES
JAVA SCRIPT
CSS
I hope this code is really helpful to you. Keep visiting for more articles like this. Stay connected with us.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
JAVA SCRIPT
<script type='text/javascript'> $(function(){ // Hide Header on on scroll down var Checkscroll; var LastcrollScroll = 0; var delta = 5; var menuHeight = $('header').outerHeight(); $(window).scroll(function(event){ Checkscroll = true; }); setInterval(function() { if (Checkscroll) { hasScrolled(); Checkscroll = false; } }, 250); function hasScrolled() { var scroll = $(this).scrollTop(); if(Math.abs(LastcrollScroll - scroll) <= delta) return; if (scroll > LastcrollScroll && scroll > menuHeight){ // Scroll to Down $('header').removeClass('navbar-header').addClass('nav-up'); } else { // Scroll to Up if(scroll + $(window).height() < $(document).height()) { $('header').removeClass('nav-up').addClass('navbar-header'); } } LastcrollScroll = scroll; } }); </script>
CSS
<style type='text/css'> body { padding-top: 80px; /* Show the content from here */ } header { position: fixed; top: 0; transition: top 0.2s ease-in-out; width: 100%; } .nav-up { top: -50px; /* we can change the hide as we need */ } .bodycontainer { height: 4000px; /* For testing i have given this much height */ } </style>
I hope this code is really helpful to you. Keep visiting for more articles like this. Stay connected with us.
Very informative post.
ReplyDeleteInteresting to see that blogs and very help ful for me
Thanks!
ReplyDeleteI was glad to discover this site. I have to thank you for your minute because of this fantastic read!! I certainly appreciated all of it and I have you book-set apart to see new things in your site.
ReplyDeleteGo to this site: top essay writing service