javascript - jQuery Validate with fixed header 验证

Question

我正在使用 jQuery validate plugin我有一个固定的 header 。

每当我按下提交按钮并且缺少必填字段时，插件会直接跳转到该字段并显示它是必填字段。但是，由于我有一个固定的 header ，插件跳转到该字段并且看不到它，因为它在固定 header 下。我该如何解决这个问题？

这是一个最小的示例代码和相关的 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 的解决方案.我有点困惑，因为我真的不知道插件是如何滚动到“必填”字段的。我没有在插件中找到类似方法“scrollTo”的东西。如果我能找到相应的代码部分，也许可以简单地更改滚动到的偏移量？

Answer 1

我能够使用这个额外的 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);
      }
  });