Question

我的页面有一个固定的标题。

当用户未在表单提交时传递表单验证时，我会在表单上方显示错误列表，每个错误列表都包含指向产生错误的表单元素的链接。

但是，当我点击指向锚点的链接时，固定标题会隐藏该元素。

我见过许多使用伪类:before解决这个问题的css解决方案，但这不能应用于输入元素。

是否有替代的基于CSS的解决方案或我是否被迫创建JS工作？

提前致谢

Answer 1

包含所有错误消息的容器可以将padding-top设置为等于标题的高度。然后它将取消列表。您将不得不使用px来使其正常显示。这不是一个完美的解决方案，但它很容易。

以下是一个快速示例，因为您没有提供任何代码：

<强> HTML

<div id="header">
    Fixed Header
</div>
<div id="error">
    <ul>
        <li>Error One</li>
        <li>Error Two</li>
        <li>Error Three</li>
    </ul>
</div>

<强> CSS

#header { 
    background-color: #ccc;
    position: fixed;
    height: 50px;
    width: 100%;
}

#error {
    padding-top: 50px;
}

这是jsfiddle form。希望我能正确理解这个问题。

固定标题 - 锚到输入字段

1 个答案: