JSFiddle - React, Tailwind, and code Playground

by Kevin Kirchner

HTML

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

<div class="header">
        Header
    </div>
    <div class="container">
      <form action="">
          <label>Testfield1: <input type="text"/></label>
          <label>Testfield2: <input type="text"/></label>
          <label>Testfield3: <input type="text"/></label>
          <label>Testfield4: <input type="text"/></label>
          <label>Testfield5: <input type="text"/></label>
          <label>Testfield6: <input type="text"/></label>
          <label>Testfield7: <input type="text"/></label>
          <label>Testfield8: <input type="text"/></label>
          <label>Testfield9: <input type="text"/></label>
          <label>Testfield9: <input type="text"/></label>
          <label>Testfield9: <input type="text"/></label>
          <label>Testfield9: <input type="text"/></label>
          <label>Testfield9: <input type="text"/></label>
          <label>Testfield9: <input type="text"/></label>
          <label>Testfield9: <input type="text"/></label>
          <label>Testfield9: <input type="text"/></label>
          <label>Testfield9: <input type="text"/></label>
          <label>Testfield9: <input type="text"/></label>
          <label>Testfield9: <input type="text"/></label>
          <label>Testfield9: <input type="text"/></label>
      </form>
    </div>
    <div class="footer">
        Footer
    </div>

CSS

body {
  padding: 120px 0 50px 0;
}
.header {
    position: fixed;        
    height: 100px;
    width: 100%;
    top: 0;
    background: #bada55;
}
.footer {
    position: fixed;
    height: 60px;
    width: 100%;
    bottom: 0;
    background: #facade
}
.fixfixed .header,
.fixfixed .footer {
    position: absolute;
}
label {
    display: block;
    margin: 0 0 60px 0;
}

JavaScript

jQuery(function(){
    var $body = jQuery('body');
    var $inputs = jQuery('input');

    $inputs.on('focus', function(e) {
        $body.addClass('fixfixed');
    });
    $inputs.on('blur', function(e) {
        $body.removeClass('fixfixed');
    });
});