javascript - jQuery验证带有固定 header

我正在使用jQuery validate plugin，并且具有固定的标头。

每当我按下“提交”按钮并且缺少必填字段时，插件都会直接跳到该字段并显示它是必填字段。但是，由于我有一个固定的标头，因此该插件跳到该字段，并且看不到它，因为它在固定的标头下。我怎样才能解决这个问题？

这是一个最小的示例代码和相关的jFiddle

$("#awesome").validate({
    rules: {
        name: "required"
    }
});

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

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

编辑：我正在寻找类似于offsetting an html anchor to adjust for fixed header的解决方案。我有点困惑，因为我真的不知道插件如何滚动到“ required”字段。我没有在插件中找到类似方法“ scrollTo”的东西。如果我能找到相应的代码部分，也许可以简单地更改滚动到的偏移量？

最佳答案

我能够使用以下其他jQuery脚本对其进行修复（请参见jFiddle）：

 $("input").focus(function(){
      var elementOffset = $(this).offset().top,
      scrollTop     = $(window).scrollTop(),
      distance      = (elementOffset - scrollTop);

      var addSpace = 50 - distance;

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