Question

我在页面内链接和固定标题方面苦苦挣扎。我有一个50px的粘页眉（位置固定）。这样，即使在页面中向下滚动，标题也始终可见。在我的页面中，然后有一个菜单，其中包含指向页面其他部分的链接。我将href与IDs目标一起使用。问题是，当我单击链接时，页面将目标定位在页面的顶部，标题将我的目标部分隐藏了50px。

下面的代码显示了问题

<html>
<head>
        <style>
        .header {
            position: fixed;
            top: 0px;
            right: 0;
            left: 0;
            margin-left: auto;
            margin-right: auto;
            background-color: red;
            height: 50px;
        }

        .container1 {
           content: none;
           height: 200px;
           background-color: green;
         }
        .container2 {
           content: none;
           height: 800px;
           background-color: lightblue;
        }


    </style>
</head>

<body>

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

    <div class="container1"></div>
    <div class="container2">

        <a href="#block1">block1</a>

        <div id="block1">Some text</div>            
    </div>

</body>

Answer 1

这就是锚点的工作方式。要实现目标，请尝试为目标设置标头高度的填充。这样就可以解决。

#block1 {
  padding: 60px 0;
}

具有固定位置的标题和href的问题

1 个答案: