Navbar toggle

by kkdaily

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<nav class="header navbar navbar-default navbar-fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</a>
  </div>
</nav>
<div class="other-div">HEADER TO CLONE HERE WHEN ENTERS</div>

CSS

body {
  height: 5000px;
}
.header {
		position: absolute;
		width: 100%;
		height: 60px;
		line-height: 60px;
		background: #eee;
		color: #666;
		padding-left: 20px;
		border-bottom: 5px solid #ddd
	}
.header.clone {
		position:fixed;
		height: 60px;
		padding-top: 4px;
		background-color: #fff;
		border-bottom: 2px solid #F0F0F0;
		top:-65px;
		left: 0;
		right: 0;
		z-index:999;
		transition:0.2s top cubic-bezier(.3,.73,.3,.74);
}
body.down .header.clone{
		top:0;
}
.other-div{
  height: 100px;
  color: #fff;
  font-size: 30px;
  background-color: #000;
  margin-top: 500px;
}

JavaScript

$(document).ready(function() {
	var $header = $(".header"),
		$clone = $header.before($header.clone().addClass("clone"));

	$(window).on("scroll", function() {
  	
    var cloneArea = $('.other-div').offset().top;
		var fromTop = $(window).scrollTop();
    
    if ((fromTop - cloneArea >= 0) && ($("body").hasClass("down") == false)) {
    	$("body").addClass("down");
    } else if ((fromTop - cloneArea < 0) && ($("body").hasClass("down") == true)) {
    	$("body").removeClass("down");
    }
		
	});
});