title: Navbar to change colour on scroll bootstrap 4
body: <p>Hi guys so i want my navbar to be able to switch colors from transparent to black as soon as the user scrolls, now this code worked on my bootstrap 3 website but when i have changed to bootstrap 4 it didn't work for some reason </p>
  
  <p>html:</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav" role="navigation"&gt;
  ...
    &lt;/nav&gt;
  </code></pre>
  
  <p>CSS: This just making it transparent </p>
  
  <pre><code>.bg-dark {
        background-color: rgba(255, 0, 0, 0)!important;
        padding-top: 20px;
  }
  </code></pre>
  
  <p>javascript : </p>
  
  <pre><code>       $(document).ready(function(){
  
       var checkScrollBar = function(){
         $('.bg-dark').css({
           backgroundColor: $(this).scrollTop() &gt; 1 ?
             'rgb(0, 0, 0)' : 'transparent'
         })
       }
       $(window).on('load resize scroll', checkScrollBar)
       });
  </code></pre>
  
  <p>Again this was working on my other site but on this one i cant seem to get it to work for some reason , </p>
  
  <p>thanks </p>