Transparent menu with color change when moving the mouse

Question

How do I make the menu effect at the top appear transparent showing an image and when moving the mouse appears a bar with color like this template. Could someone give me a hint?

Example: http://themes.semicolonweb.com/html/canvas/

Answer 1

Suffice place or nay one background-color in divs. If you don’t put a background in the div, it will show what’s underneath it. To put color you use background-color (OR ONLY background), to put image you use background-image.

Take a look at this page and learn how to use backgrounds (backgrounds): https://www.w3schools.com/css/css_background.asp

Answer 2

As @Davidsamm said, just don’t assign a background color to the target element, and then scroll to set it a color.

var el = document.getElementById('menu'); // elemento alvo
var numPx = '250'; // Quantidade de pixels a contar do TOP até definir a cor

window.addEventListener('scroll', function() {
    if (window.scrollY > numPx) {
    	el.classList.add('mudaCor'); // adiciona classe "mudaCor"
    } else {
      el.classList.remove('mudaCor'); // remove classe "mudaCor"
    }
});

html { 
    background: url(https://i.stack.imgur.com/NsOce.jpg) no-repeat center center fixed; 
    background-size: cover;
    font-family: sans-serif;
    color: #fff;
}
.section{height:100vh;}

/* Define o menu */
#menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    border-bottom: 1px solid #fff;
    transition: background-color 0.3s ease-in-out;
}

/* Nova classe a ser atribuída ao elemento com os estilos desejados */
.mudaCor{
    background-color:#fff;
    color:#000;
}
#menu .item{display:inline-block;padding:15px;}
#body-wrapper{margin-top:70px;}

<div id="menu">
    <div class="item">Inicio</div>
    <div class="item">Sobre</div>
</div>
<div id="body-wrapper">
    <div class="section">Primeira Secção</div>
    <div class="section">Segunda Secção</div>
    <div class="section">Terceira Secção</div>
</div>

However, if you really need to add a background color for some reason or preference, you can use a color rgba any and remove the entire opacity from it. But note that will also need to add a !important to overwrite the previously applied color.

#menu {
    background-color: rgba(0,0,0,0);
}
.mudaCor{
    background-color:#fff !important;
}

Live example: https://jsfiddle.net/2jkupaz4/

Answer 3

Look at this, creating a ul.active with different color background. Thus, you can use the method addClass and removeClass when to use the scroll. Take a look if this way resolves for you:

$(window).scroll(function(event){

  var yOffset = window.pageYOffset;
  var breakpoint = 50;
  if (yOffset > breakpoint){
    $("nav ul").addClass('active');
  }else{
    $("nav ul").removeClass('active');
  }

});

body{
 background:#eee;
 padding: 0;
 margin:0;
}
nav ul{
  margin-top: 0p;
  position:fixed;
  z-index:1000;
  width:100%;
  color:#333;
  list-style:none;
  -webkit-transition:.5s;
  -moz-transition:.5s;
  transition:.5s;
  font-size: 18px;
}
nav ul.active{
  background:#fff;
  color:#212121;
}
nav ul li{
  display:inline-block;
  padding:20px 30px;
}
section{
  padding:100px 50px 50px;
  line-height:140%;
}
p{
  margin-bottom:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>Jon Snow</li>
    <li>Jack Sparrow</li>
    <li>George Harrison</li>
  </ul>
</nav>
<section>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at libero nunc. Ut nec maximus leo, et tristique lacus. Praesent condimentum eleifend gravida. Phasellus pharetra finibus sapien, in ullamcorper orci imperdiet at. Phasellus vel arcu suscipit, pellentesque massa nec, tincidunt neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus tristique nunc nec finibus commodo. In hac habitasse platea dictumst. Vivamus mattis nec lorem sed sollicitudin. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tristique, orci a feugiat vulputate, enim risus egestas mi, ac efficitur purus est placerat justo. Vestibulum ex erat, facilisis at quam quis, euismod vehicula magna. Aliquam faucibus laoreet sapien nec vulputate. Etiam a sapien sit amet risus fermentum vehicula eu et velit.
  </p>
 
</section>