Показать сообщение отдельно
  #1 (permalink)  
Старый 25.11.2015, 14:27
Интересующийся
Отправить личное сообщение для goody-goody Посмотреть профиль Найти все сообщения от goody-goody
 
Регистрация: 13.10.2015
Сообщений: 17

Как правильно реализовать прокрутку меню?
Доброго времени суток! Подскажите, пожалуйста, как реализовать переход меню при прокрутке, чтоб пункты не уползали, и потом снова появлялись, а были зафиксированы
<!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;
}
Ответить с цитированием