Change the css class after a scrolled threshold. CSS has a background change.

_nav.scss

nav#main {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.01);
  transition: all 0.3s ease;

  &.opaque {
    background: rgba(255, 255, 255, 0.8);
  }
}

opaque-nav.js

// Navigation Scrollllllling
var nav = $('#main'),
    threshold = 500,
    scrollPos = 0,
    opaqueState = false;

$(document).on('scroll', function() {
  scrollPos = $(this).scrollTop();

  if(scrollPos > threshold) {
    opaque(true);
  } else {
    opaque(false);
  }
});

function opaque(state) {
  if ( state && !opaqueState ) {
    nav.addClass('opaque');
    opaqueState = true;
  }
  if ( !state && opaqueState ) {
    nav.removeClass('opaque');
    opaqueState = false;
  }
}