Form Validation error: relative jump and sticky header

Question

On one of my pages, I have a web form and a sticky header.

When a user tries to submit this form using a modern-ish browser but has not filled in the required fields, an error balloon is displayed (as expected).

The problem is the sticky header, which hides the input field, as shown here (jsfiddle):

Now, my question is:

Is there a sensible way to prevent this behaviour and add some pixels to the relative page-jump caused by submit event, when form.checkValidity() is false?

I've added my current implementation as answer.

(N.B. You could argue whether a sticky header is beneficial at all or not, but this discussion shall be taken at UX).

Answer 1

My current implementation for evaluation: http://jsfiddle.net/je8gttnj/

The gist of it is the following code:

jQuery(document).on('click', 'form :submit', function(e) {
  var form;
  if ((form = jQuery(e.target).closest('form')).length !== 1) {
    return;
  }
  if (!form[0].checkValidity || form[0].checkValidity()) {
    return;
  }
  reposition();
});

where reposition() basically calls window.scrollBy(0, headerHeight):

var headerHeight;
var reposition = function() {
  headerHeight || (headerHeight = jQuery('.navbar-fixed-top').outerHeight() + 50);
  setTimeout(function() {
    window.scrollBy(0, -headerHeight);
  }, 50);
};

Personally, I find this not as nice as it could be, but is does the job.