Доброго времени суток! Подскажите, пожалуйста, как реализовать переход меню при прокрутке, чтоб пункты не уползали, и потом снова появлялись, а были зафиксированы
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href="style.css">
<title>Test Frontend</title>
</head>
<body>
<header id='header'>
<ul class='nav-bar'> <!-- proximanova semibold -->
<li>Our<br>Heritage</li>
<li>What’s Our<br>Secret?</li>
<li>Why Are Dairy<br>Products Good<br>For You?</li>
<li>Our<br>Products</li>
<li>Ask Your<br>Farmer</li>
<li>Cheese<br>Recipes</li>
<li id='contact'>Contact Us</li>
<li></li>
</ul>
</header>
<div id='jumbotron'></div>
<div id='content'>
</div>
<script>
var header = document.getElementById('header');
var headerSourceBottom = header.getBoundingClientRect().bottom + window.pageYOffset;
window.onscroll = function() {
if (header.classList.contains('fixed') && window.pageYOffset < headerSourceBottom) {
header.classList.remove('fixed');
} else if (window.pageYOffset > headerSourceBottom) {
header.classList.add('fixed');
}
};
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face {
font-family: ProximaNova Semibold;
src: url(fonts/proximanova-semibold.otf);
}
header {
width: 100%;
height: 140px;
position: absolute;
}
.nav-bar {
margin-left: 20em;
}
.nav-bar li {
margin-top: 1.8em;
display: inline-block;
padding: 0 1.5em;
font-family: ProximaNova Semibold;
font-size: 1.3em;
color: white;
text-align: center;
vertical-align: top;
line-height: 1.3em;
}
#contact {
padding-top: .75em;
}
#jumbotron {
background-image: url(http://i11.pixs.ru/storage/4/6/2/jumbotronj_7527400_19634462.jpg);
background-size: 100%;
background-repeat: no-repeat;
height: 765px;
}
#content {
background-image: url(http://i11.pixs.ru/storage/4/7/3/contentbgj_3491250_19634473.jpg);
background-size: 100%;
background-repeat: no-repeat;
height: 1765px;
}
.fixed {
background-image: url(http://i11.pixs.ru/storage/4/4/7/headerjpg_2661381_19634447.jpg);
background-size: 100%;
background-repeat: no-repeat;
height: 140px;
position: fixed;
top: 0;
}
