JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<div class='top-menu'>
Fixed Menu
</div>

<form id='awesome' method='POST' >

<input type='text' id='name' name='name'>
<div style='height:3000px;background-color:red;'></div>
<input type='submit'>
</form>

CSS

form{
  margin-top: 50px;
}

.top-menu{
  height: 50px;
  background-color: rgba(23,123,23,0.3);
  font-size: 16px;
  color: #FFF;
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
}

JavaScript

$("#awesome").validate({
    rules: {
      name: "required"
    }
  });
  
  $("input").focus(function(){
      console.log("FOCUS");
      var elementOffset = $(this).offset().top,
      scrollTop     = $(window).scrollTop(),
      distance      = (elementOffset - scrollTop);
      
      var addSpace = 50 - distance;

      console.log(addSpace);
      if(addSpace > 0)
      {
          var y = $(window).scrollTop();  
          $(window).scrollTop(y-addSpace);
      }
  });