html - 固定 header 隐藏错误消息

Question

我遇到了一个问题，我在表单上有一个固定的标题。当有人提交该表单时，该表单的字段未正确填写，错误消息会被 float 在其上方的固定标题隐藏。

附件是一个更好地描述问题的 jsfiddle。不要填写任何字段，只需向下滚动并按提交，您会注意到固定标题上方出现错误消息，但该字段被隐藏

有什么方法可以像这样偏移标题吗？

http://jsfiddle.net/sD6Rk/

这是来自 fiddle 的代码:

HTML

<div class="container">
<div class="header"></div>

<div class="wrapper">
    <form action="#">
        <label for="one">One</label>
        <input type="text" required="required" id="one" name="one" />

        <label for="two">two</label>
        <input type="text" required="required" id="two" name="two" />

        <label for="three">three</label>
        <input type="text" required="required" id="three" name="three" />

        <label for="four">four</label>
        <input type="text" required="required" id="four" name="four" />
        <p>scroll down for submit button</p>
        <input type="submit" value="submit" id="submit">
    </form>
</div>

CSS

body, html {
    margin: 0;
    padding: 0;
}

input, label {
    display: block
}

.container {
    height: 1500px
}

.wrapper {
    padding-top: 200px
}

.header {
    height: 200px;
    position: fixed;
    background: red;
    width: 100%;
}

#submit{
    margin-top: 500px
}

Answer 1

原来答案是 jQuery 中的东西。它不是最干净的，但基本上当单击提交按钮时，将焦点放在错误消息上，然后停止焦点在之后一遍又一遍地触发。然后在每次点击提交按钮时重置。

var error;
   $('input[type=submit]').on('click', function(){
        error = 0;

        $("input").focus(function() {
            if(error === 0){
                error = 1

                var target = $(this).offset().top;
                var header = $('.l-header').height();

                $(window).scrollTop( target - header )
            }
        });
    })