JSFiddle - React, Tailwind, and code Playground

by dswitzer

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div>
  <nav id="header" class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container-fluid">
      <div class="navbar-header">
        <a href="#">Brand</a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li class="active">
          	<a href="#">Home</a>
          </li>
        </ul>
      </div>
	</div>
	</nav>
  <div>
    <div class="container" style="padding-top: 80px; padding-bottom: 50px;">
      <form role="form">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input autofocus="" type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address 1</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password 1</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address 2</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password 2</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div...

CSS

.footer {
background: none repeat scroll 0 0 #f5f5f5;
border-top: 1px solid #e5e5e5;
bottom: 0;
height: 45px;
left: 0% !important;
line-height: 40px;
position: fixed;
right: 0;
text-align: center;
width: 100% !important;
z-index: 999;
}

JavaScript

jQuery('input, button, a, textarea, span').on("focus", function (event) {
	var element = jQuery(this)
		, scrollSpeed = 100
		, headerThreshold = $("#header").outerHeight() // = header height + buffer (label + form field)
		, footerThreshold = $("#footer").outerHeight() + element.outerHeight() // = footer height + buffer (label + form field)
	;

	// scroll if above the fixed header
	if( ((element.offset().top) - jQuery(window).scrollTop()) < headerThreshold ){
		jQuery('html, body').animate({
			scrollTop: element.offset().top - headerThreshold
		}, scrollSpeed);
	// scroll if below the fixed footer
	} else if( (element.offset().top - jQuery(window).scrollTop()) > (jQuery(window).height() - footerThreshold) ){
		jQuery('html, body').animate({
			scrollTop: element.offset().top - (jQuery(window).height() - footerThreshold)
		}, scrollSpeed);
	}
});