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>
	<div style="height: 80px;"></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-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 style="height: 200px; width: 100%; overflow: auto;">
--->
        <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"...

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;
}

.navbar-sticky-top {
	position: sticky;
	top: 0;
	border-width: 0 0 1px;
	z-index: 999;
}

JavaScript

(function (){
	if( !("UIUtils" in window) ){
		window.UIUtils = {};
	}

	/*
	 * This listens for focusable items that have received focus from a non-pointer
	 * event and makes sure the element is visible in the viewport. This function
	 * was written to fix issues where fixed/sticky elements can end up keeping
	 * elements hidden from the user's view because the element is not scrolled
	 * into the viewport correctly.
	 */
	UIUtils.applyAutoscrollFocusBehavior = function(options){
		options = jQuery.extend({
			// defaults
			  selector: "a, input, textarea, button"
			, header: null // can either an element id or an HTML node
			, footer: null // can either an element id or an HTML node
			, scrollOffset: 50
			, scrollSpeed: 150
		}, options);

		var isFixedPosition = function (node){
			// determine the CSS property
			var position = getComputedStyle(node, null).getPropertyValue("position");

			// both positions of "fixed" and "sticky" can have fixed positions in the viewport
			return ((position === "fixed") || (position === "sticky"));
		};

		// we never want to apply our focus behavior when the user uses a pointer to put focus on an element
		var preventAutoscrollBehavior = false;
		// we monitor for pointer events, so we can make sure to cancel our focus correction behavior
		jQuery(document).on("mousedown mouseup touchstart touchend", options.selector, function (event){
			// we need to track if the pointer was used and if so, we skip the scrolling behavior
			preventAutoscrollBehavior = ((event.type == "mousedown") || (event.type == "touchstart"));
		});

		// in some browser (e.g. Firefox 67.0.1), switching back to a tab can fire the focus event which could
		// lead to the page scrolling, which we do not want
		jQuery(window).on("visibilitychange", function (event){
			// we need to bypass the focus event for the next cycle
			preventAutoscrollBehavior = true;

			// there is no event we can clear the flag, so we just wait until the focus event...