Как сделать прозрачную навигационную панель на фоновом изображении с оверлеем? - PullRequest
Новая
       5

Как сделать прозрачную навигационную панель на фоновом изображении с оверлеем?

0 голосов
/ 08 июня 2018

Я новичок, и я пытаюсь сделать это для моей практики. Пожалуйста, отметьте это

Может ли кто-нибудь помочь мне сделать секцию панели навигации и секцию наложения?

При прокрутке цвет панели навигации изменяется из секции 1, и это нене будет отображаться при наложении

1 Ответ

0 голосов
/ 08 июня 2018

Вот кодовая ручка для объяснения, которое я сделал в разделе комментариев

Кодовая ссылка 

window.addEventListener('scroll', function () {
  if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
        document.getElementById("nav").className = "fixed";
    } else {
        document.getElementById("nav").className = "";
    }
})
header{
  background:url("http://foundry.mediumra.re/img/home2.jpg") no-repeat center center;
  height:100vh;
  width:100%;
}
#nav{
  position:absolute;
  width:100%;
  top:0;
  text-align:center;
  color:#fff;
  font-size:40px;
  background:none;
}
#nav.fixed{
  background:#fff;
  position:fixed;
  color:#000;
  
}
.content{
  text-align:center;
  font-size:30px;
  margin:30px 0;
  
}
<div>
  <header>
    <div id="nav">
      Navigation
    </div>  
  </header>
    <section>
      <div class="content">Test Content</div>
      <div class="content">Test Content</div>
      <div class="content">Test Content</div>
      <div class="content">Test Content</div>
      <div class="content">Test Content</div>
      <div class="content">Test Content</div>
      <div class="content">Test Content</div>
      <div class="content">Test Content</div>       <div class="content">Test Content</div>
      <div class="content">Test Content</div>
    </section>
</div>

Используется чистый JS и CSS.Дайте мне знать, это то, что вы ищете.Спасибо!

...