enter image description here

How to make navbar transparent when scrolling down? I use bootstrap .

 <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"><span>qwerty</span></a> </div> <div class="collapse navbar-collapse" id="collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="health.html">qwerty</a></li> <li><a href="#">qwerty</a></li> <li><a href="#">qwerty</a></li> <li><a href="#">qwerty</a></li> </ul> </div> </div> </nav> 
  • And when scrolling up back became visible? - Yuri
  • Yes. To be visible only at the highest point. - Ravdan
  • Maybe then just remove the class navbar-fixed-top ? - Alexander Igorevich
  • I need it to be fixed - Ravdan

1 answer 1

This is done using the onscroll event, which needs to be applied to the window , and checking for the scroll position

 window.onscroll = function() { var scrolled = window.pageYOffset || document.documentElement.scrollTop; // Получаем положение скролла if(scrolled !== 0){ // Если прокрутка есть, то делаем блок прозрачным document.querySelector('.navbar').style.opacity = '0.5'; }else{ // Если нет, то делаем его полностью видимым document.querySelector('.navbar').style.opacity = '1'; }; }; 
 body {height: 2000px} .navbar { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: black; } 
 <div class="navbar"></div> 

  • Thanks, it helped. Another question: how to change the degree of transparency? - Ravdan
  • @Ravdan, um ... and the value of 0.5 and 1 is what do you think?) - Yuri
  • Already understood. Thanks for the answer. - Ravdan
  • And what code you need to enter so that when you click on a hamburger navbar again become fully visible? - Ravdan
  • one
    @Ravdan, you did not learn anything. These are the basics. This is the first thing you need to know. Ask a new question about this and you will be answered - Yuri