Как сделать, что бы при скроле, меню меняло свой вид?

Доброе время суток, ребята, подскажите, как сделать меню как на этом сайте?
premmerce.com.ua
при скроле с прозрачного, стает темным и прилипает к верху окна?
  • Вопрос задан
  • 191 просмотр
Пригласить эксперта
Ответы на вопрос 1
SlaXe
@SlaXe
Если я вас правильно понял то вот:
<!DOCTYPE HTML>
<html>

<head>
  <style>
    body,
    html {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }

    #matrix {
      width: 400px;
      margin: auto;
      overflow: auto;
      text-align: justify;
    }

	#updown {
      height: 50px;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      cursor: pointer;
	  background: #3498DB;
    }
	
    #updown.up {
      width: 100%;
	  height: 50px;
	  background: #ccc;
    }
	

	.gg {
		width: 100%;
		height: 200px;
		border-bottom: 1px solid #f00;
	}
  </style>
  <meta charset="utf-8">
</head>

<body>
<div class="gg"></div>
  <div id="matrix">
    <script>
      for (var i = 0; i < 2000; i++) document.writeln(i)
    </script>
  </div>

  <div id="updown">
	<div id="menu"></div>
  </div>

   <script>
    var updownElem = document.getElementById('updown');
    var pageYLabel = 0;

    updownElem.onclick = function() {
      var pageY = window.pageYOffset || document.documentElement.scrollTop;

      switch (this.className) {
        case 'down':
          window.scrollTo(0, pageYLabel);
          this.className = 'up';
      }

    }

    window.onscroll = function() {
      var pageY = window.pageYOffset || document.documentElement.scrollTop;
      var innerHeight = 200; // кол-во пикселей вниз

      switch (updownElem.className) {
        case '':
          if (pageY > innerHeight) {
            updownElem.className = 'up';
          }
          break;

        case 'up':
          if (pageY < innerHeight) {
            updownElem.className = '';
          }
          break;
      }
    }
  </script> 
 
</body>

</html>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы