Persistent headers and footers on reveal.js slides

index-bottom.html

<!--include before initialize block-->
<script src="path/to/jquery.min.js"></script>
<script type="text/javascript">
  Reveal.addEventListener( 'ready', function( event ) {
    var banners = '<div id="banners"><header \/><footer \/><\/div>';
    $('section').each(function (index, slide ) {
        if ($(slide).children('section').length == 0) {
          var bannerText = $(slide).closest('[data-banner]').data('banner');
          if (bannerText) { 
            var background = $(slide.slideBackgroundElement);
            background.append(banners);
            background.find('header,footer').text(bannerText);
          }
        }
    });
  });
</script>

index.html

<!-- set data-banner values appropriately -->
<section data-banner="default">
  <section>
    <h2>Why a default?</h2>
    <blockquote>
    Sometimes you just need banners that all look the same.
    </blockquote>
  </section>

  <section data-banner="something different">
    <h2>But</h2>
    <blockquote>
    Sometimes they should be different.
    </blockquote>
  </section>
  
  <section data-banner="">
    <h2>Finally</h2>
    <blockquote>
    Sometimes you want them to be blank.
    </blockquote>
  </section>
</section> 

slides.css

header { 
    position: absolute;
    top: 0;
    width: 100%;
    text-align:center;
} 
footer { 
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align:center;
}