Transparent Fixed Header (Opaque on Scroll)

x-transparent-fixed-header.js

jQuery(document).ready(function($){
  
  // Detect if this is a hero image page by looking for the #heroimage ID
  if( $('#heroimage').length ){
    // get the value of the bottom of the #heroimage element by adding the offset of that element plus its height, set it as a variable
    var mainbottom = $('#heroimage').offset().top + $('#heroimage').outerHeight(true);

    $(window).on('scroll',function(){
      var stop = Math.round($(window).scrollTop());
      // If the use has scrolled past the bottom of the hero image
      if (stop > mainbottom) {
          $('.x-navbar').addClass('pasthero');
      } else {
      // if the user has scrolled back up above the bottom of the hero image
          $('.x-navbar').removeClass('pasthero');
      }
    });
  } else {
  // if no hero image present, add the opaque class right away
     $('.x-navbar').addClass('pasthero');
  }
  
});