JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
        <div class="row">
            <div class="navbar navbar-inverse navbar-fixed-top">
                    <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu">
                        <span class="sr-only">Открыть навигацию</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>                       
                    </button>
                    </div>
                    <div class="container">
                    <div class="collapse navbar-collapse" id="responsive-menu">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#ex1" style="color:black">Контакты</a></li>
                            <li><a href="#ex2" style="color:black">Услуги</a></li>
                        </ul>
                    </div>
                    </div>
            </div>
            <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
        </div>
      </div>

CSS

.navbar.navbar-inverse.navbar-fixed-top{
  opacity:1;
  transition:opacity .5s;
}
.navbar.navbar-inverse.navbar-fixed-top.transparent{
  opacity:0.5;
}

JavaScript

var nav = document.querySelector(".navbar.navbar-inverse.navbar-fixed-top")
window.addEventListener("scroll", function(){
	if(document.body.scrollTop > 50){
  	nav.classList.add("transparent");
  }
  else{
  	nav.classList.remove("transparent");
  }
});