Transparent menu with color change when moving the mouse

Question

Transparent menu with color change when moving the mouse

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

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 equal this template. Could someone give me a tip?

Example: link

javascript css3

asked by anonymous 16.08.2017 / 05:20

3 answers

Plot of the distribution of the degrees of a graph in R Differences between Commit Staged, Commit Staged and Push, Commit Staged and Sync?

score 1 · Answer 1

Just put or not a background-color in divs . If you do not put a background in the div, it will show what's under 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 funds ( backgrounds ): link

score 1 · Answer 2

As @DavidSamm said, you just do not assign a background color to the target element, and then by scrolling you set 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 and remove the entire opacity completely. But note you'll 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 sample: link

score 0 · Answer 3

So, creating a ul.active with a different color background. So you can use the addClass and removeClass method when using scroll . Take a look if this works out 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>