Fixed menu

fixed menu

<div id="menu" class="main_header_bottom">
			<div class="header_bottom_wrp">
				<div class="phone_wrp"><p class="phone">+375 29 111-54-56</p></div>
				<div class="top_mnu_wrp">
						<ul class="top_mnu">
							<li><a href="javascript:void(0)">главная</a></li>
							<li><a href="javascript:void(0)">услуги</a></li>
							<li><a href="javascript:void(0)">бюро стилистов</a></li>
							<li><a href="javascript:void(0)">обучение</a></li>
							<li><a href="javascript:void(0)">выпускники</a></li>
							<li><a href="javascript:void(0)">статьи</a></li>
						</ul>
						<div class="button_mnu_wrp">
							<div class="toggle_mnu">
								<div class="sandwich">
									<div class="sw-topper"></div>
									<div class="sw-bottom"></div>
									<div class="sw-footer"></div>
								</div>
								<p>menu</p>
							</div>
							<nav class="top_mnu_btn">
								<ul>
									<li><a href="#">главная</a></li>
									<li><a href="#">услуги</a></li>
									<li><a href="#">бюро стилистов</a></li>
									<li><a href="#">обучение</a></li>
									<li><a href="#">выпускники</a></li>
									<li><a href="#">статьи</a></li>
								</ul>
							</nav>
						</div>
					</div>
				<div class="social_wrp">
				<div class="social">
					<a href="javascript:void(0)"><i class="fa fa-instagram inst"></i></a>
					<a href="javascript:void(0)"><i class="fa fa-vk vk"></i></a>
					<a href="javascript:void(0)"><i class="fa fa-facebook fb"></i></a>
				</div>
			</div>
			</div>
		</div>
		
		
		
		
.main_header_bottom{
	padding-top: 15px;
	margin: 0 auto;
	max-width: 960px;
}
.header_bottom_wrp{
	text-align: center;
}
.phone_wrp{
/*	max-width: 130px;*/
	width: 130px;
	display: inline-block;
	margin-right: 20px;
}
.phone{
	color: #fff;
	font-family: "PTSans";
	text-align: left;
}
.top_mnu_wrp{
	max-width: 620px;
	display: inline-block;
	vertical-align: top;
	margin-right: 30px;
}
.fixed{
	position:fixed;
	top:-5px; left:0;
	width:100%;
	z-index: 100;
	padding:10px 0 0;
	background: #262626;
}
.top_mnu{
	list-style-type: none;
	float: left;
	margin-top: -2px;
	padding-left: 0;
}
.top_mnu li{
	float: left;
	display: inline-block;
}
.top_mnu a{
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	display: block;
	font-size: 12px;
	font-family: "PTSans";
	padding: 16px 12px;
	letter-spacing: 1px;
	border: 2px solid transparent;
}
.top_mnu a:hover{
	border: 2px solid #BD9392;
	color: #BD9392;
	transition: all .25s ease;
}
.social_wrp{
	max-width: 130px;
	display: inline-block;
	vertical-align: top;
}
.social{
	display: inline-block;
	padding-top: 10px;
	float: right;
}
.social a{
	font-size: 16px;
	color: #686868;
	width: 14px;
	height: 14px;
	text-decoration: none;
	border-radius: 50%;
	border: 2px solid #686868;
	display: inline-block;
	padding: 12px;
	margin-right: 5px;
	position: relative;
}
.social a:hover{
	border: 2px solid #BD9392;
	color: #BD9392;
	transition: all .3s ease;
}
.inst{
	position: absolute;
	top: 4px;
	left: 6px;
}
.vk{
	position: absolute;
	top: 4px;
	left: 3px;
}
.fb{
	position: absolute;
	top: 5px;
	left: 7px;
}


//Фиксированное меню
	var $menu = $("#menu");

	$(window).scroll(function(){
		if ( $(this).scrollTop() > 100 && $menu.hasClass("main_header_bottom") ){
			$menu.fadeOut('fast',function(){
				$(this).removeClass("main_header_bottom")
					.addClass("fixed")
					.fadeIn('fast');
			});
		} else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
			$menu.fadeOut('fast',function(){
				$(this).removeClass("fixed")
					.addClass("main_header_bottom")
					.fadeIn('fast');
			});
		}
	});//scroll