toggle navbar between transparent and flat ui

main.css

.navigation.transparent{
  margin: 0 auto;
  overflow: hidden;
  font-weight: 600;
  background-color: rgba(0,0,0,0.25);
  border-color: transparent;
  // color: #fff !important;
  @include border-radius(0px);
  @include box-shadow(0 0 0 0);

  a {
    // color: $text-two !important;
  }

  a:hover,a:focus{
    font-size: 17px;
    color: $turquoise !important;
  }

}

main.js

    $(document).ready(function(){
        var apply_on_scroll = function(){
            /**
             *
             * initially the nav bar is transparent to keep the image uncluttered. but if user scrolls down. A flat ui nav bar is displayed.
             *
             */
            var _this = $('.navigation');
            _this.addClass('transparent navbar-fixed-top');
            $(window).scroll(function (event) {
                var scroll = $(window).scrollTop();
                if(scroll > 150){
                    _this.removeClass('transparent');
                }
                else {
                    _this.addClass('transparent');
                }
            });
        }();
    })