Example of responsive formatting an "Onboard" section.

format-onboard.js

/* global Modernizr */
jQuery(function ($) {
  'use strict';

  var SCREEN_SMALL = '(min-width: 768px)';

  /**
   * "Welcome" onboarding message.
   */
  var $onboard = $('.onboard');
  var $site = $('.site');

  var formatOnboard = function () {
    if (
      $onboard.length &&
      Modernizr.mq(SCREEN_SMALL) &&
      $onboard.height() < $(window).height()
    ) {
      $onboard.css({
        position: 'fixed',
        width: '100%'
      });

      $site.css({
        top: $onboard.height(),
        position: 'relative'
      });
    } else {
      $onboard.removeAttr('style');
      $site.removeAttr('style');
    }
  };

  // Initialize
  formatOnboard();
  $(window).resize($.debounce(125, formatOnboard));
}(jQuery));

Couple things:

• Modernizr.mq(SCREEN_SMALL) runs Modernizr’s polyfill for matchMedia(). It returns a boolean based on the argument. Not all installs of Modernizr come with it; check your download.

• You’ll need to tear down what you’re setting up. Note the block:

  else {
    $onboard.removeAttr('style');
    $site.removeAttr('style');
  }

• The function needs to initialize, so call formatOnboard() (line 35).

• $.debounce(125, formatOnboard) debounces the window’s onresize event using jQuery-Throttle-Debounce. It will need to be included on the page.