Tesessssss,
вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.primary-nav {
position: relative;
width: 96%;
margin: 0 auto;
background-color: #111;
color: rgba(255,255,255,.87);
text-align: center;
z-index: 20;
}
.primary-nav .wrap {
width: 100%;
}
.primary-nav.sticky-nav .wrap {
width: 96%;
max-width: 980px;
margin: 0 auto;
}
.primary-nav ul.nav-menu, .primary-nav div.nav-menu > ul {
position: relative;
margin: 0 -2px;
padding: 0;
list-style: none;
display: block;
width: 100%;
z-index: 9;
font-size: 0;
}
.primary-nav ul {
margin: 0;
text-indent: 0;
}
.primary-nav li {
display: inline-block;
font-size: 13px;
margin: 0;
position: relative;
}
.nav-menu > li {
margin: 0 2px;
}
.nav-menu > li > a {
display: block;
padding: 12px;
color: rgba(255,255,255,.87);
font-size: 13px;
line-height: 1.846153846;
letter-spacing: .25px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
-webkit-transition: .2s;
-moz-transition: .2s;
-o-transition: .2s;
transition: .2s;
}
.inline-nav .nav-menu > li > a {
color: #757575;
text-transform: uppercase;
font-weight: 400;
}
ul.nav-menu li a span {
display: block;
font-size: 12px;
}
.primary-nav li:hover > a {
color: #fff;
background-color: rgba(255, 255, 255, .1);
}
.sticky-nav {
position: fixed;
top: -120px;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
z-index: 99;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#main-nav {
transition: top 1.8s;
}
.sticky-nav.fix {
top: 0;
}
.top-nav.sticky-nav {
z-index: 100;
}
body{
height: 2000px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
var ss_custom = {
"main_bar_sticky": "true"
};
function animateNav() {
var win_scroll = $(window).scrollTop(),
win_height = $(window).height(),
main_nav = $('#main-nav'),
main_nav_offset = '',
scroll_by = 120;
if (ss_custom && ss_custom.header_style == 'slim') {
main_nav = $('.header-slim');
}
main_nav_offset = $(main_nav).outerHeight();
if (ss_custom && ss_custom.main_bar_sticky && !ss_custom.top_bar_sticky) {
if (win_scroll > scroll_by) {
$(main_nav).addClass('sticky-nav');
window.setTimeout(function() {
$(main_nav).addClass('fix');
}, 0)
$('.primary').css({
"margin-top": main_nav_offset
});
if (ss_custom && ss_custom.header_style == 'slim') {
$('.menu-drop').css({
'max-height': win_height - main_nav_offset
});
} else {
$('.menu-drop').css({
'max-height': win_height - $('.menu-button').outerHeight()
});
}
} else {
$(main_nav).removeClass('sticky-nav fix');
$('.primary').css({
"margin-top": 0
});
$('.menu-drop').css({
'max-height': '100%'
});
}
}
}
animateNav();
$(window).on('load scroll', function() {
animateNav();
});
});
</script>
</head>
<body>
<br><br><br>
<nav id="main-nav" class="primary-nav" role="navigation">
<div class="wrap">
<ul id="menu-menu-2" class="nav-menu clearfix">
<li class="menu-item"><a href="">menu 1</a></li>
<li class="menu-item"><a href="">menu 2</a></li>
<li class="menu-item"><a href="">menu 3</a></li>
</ul>
</div></nav>
</body>
</html>
