Block transparency when scrolling down

Question

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>

Maybe then just remove the class navbar-fixed-top ? - Alexander Igorevich

Yuri yuri 13.3k five 38 82 · Accepted Answer · 2017-02-09T11:24:06

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>

@Ravdan, um ... and the value of 0.5 and 1 is what do you think?)
And what code you need to enter so that when you click on a hamburger navbar again become fully visible?

Block transparency when scrolling down

1 answer 1

More articles: