Positioning a fixed header below the Sitecore Experience Editor ribbon

PositionFixedNavBar-SC-Ext.js

// Repositions a position-fixed header so that it always appears under the SC experience editor ribbon
// includes added support for the Sitecore Extensions Chrome extension and its support for hiding the ribbon entirely
define(["sitecore"], function (Sitecore) {
  return {
    priority: 50,
    execute: function (context) {
      // TODO: Change this CSS selector to suit your application
      var FIXED_NAV_SELECTOR = 'nav';

      // the 'cross piece' is a blank div that is sized to match the iframe content (where the actual ribbon is)
      var scCrossPiece = window.parent.document.getElementById('scCrossPiece'); 
      var nav = window.parent.document.querySelector('.main-nav_bar');
      if (scCrossPiece && 'MutationObserver' in window) {
        var observer = new MutationObserver(function (mutations) {
          // This class is added when Sitecore Extensions hides the ribbon
          if (scCrossPiece.classList.contains('sc-ext-toggleRibon-hidden')) {
            nav.style.top = '0px';
          } else {
            nav.style.top = scCrossPiece.style.height;
          }
        });
        observer.observe(scCrossPiece, { attributes: true, attributeFilter: ['style', 'class'] });
      }
    }
  };
});

PositionFixedNavBar.js

// Repositions a position-fixed header so that it always appears under the SC experience editor ribbon
define(["sitecore"], function (Sitecore) {
  return {
    priority: 50,
    execute: function (context) {
      // TODO: Change this CSS selector to suit your application
      var FIXED_NAV_SELECTOR = '#main-nav';

      // the 'cross piece' is a blank div that is sized to match the iframe content (where the actual ribbon is)
      var scCrossPiece = window.parent.document.getElementById('scCrossPiece'); 
      var nav = window.parent.document.querySelector(FIXED_NAV_SELECTOR);
      if (scCrossPiece && 'MutationObserver' in window) {
        var observer = new MutationObserver(function (mutations) {
          nav.style.top = scCrossPiece.style.height;
        });
        observer.observe(scCrossPiece, { attributes: true, attributeFilter: ['style'] });
      }
    }
  };
});