Html, css, JS - Плавающее меняющееся меню(headhesive)

Html.html

/*Подключить скрипт */headhesive.min.js*/

<div class="menu">
   <div class="mid">
      <img src="images/photo.jpg" alt="logo" class="logotype">
      123
   </div>
</div>

JS.js

var options = {
  offset: 500
}

var header = new Headhesive('.header', options);

main.css

.mid{
	width: 800px;
	margin: 0 auto;
	text-align: justify;
}

.menu{
	background: #FB8;
	opacity: 0;
}

.logotype{
	width: 48px;
	height: auto;
	margin-right: 10px;
	vertical-align: middle;
}

.headhesive{
	background: #FB8;
	position: fixed;
	width: 100%;
	transition: 0.5s;
	padding: 20px 0;
	opacity: 1;
}

.headhesive--stick{
	padding: 10px;
	background: rgba(0,0,0,0.77);
		color: #fff;
}

.headhesive--stick .logotype{
	width: 24px;
	height: auto;
	transition: 0.5s;
}