Question

我将内容表与同一页面中某个部分的标题相关联。但是，当屏幕向下滚动到所需的部分时，实际链接的标题会在保持固定的导航栏下丢失。它在移动预览上运行良好。遇到桌面问题。以下是我正在使用的代码：

<div class="content uk-width-1-2@l uk-width-1-1@m uk-width-1-1@s">
  <span class="anchor" id="Overview"></span>
  <h2>Overview</h2>
  <p> As a very high-level summary:</p>
  <ul>
    <li>
      Companu has strong application, network and infrastructure-level
      security controls in place to ensure your data is safely stored
      and processed <br /><br />
    </li>
    <li>
      Company serves multiple tenants from the same application codebase,
      but uses effective isolation techniques to keep tenant data separate
      <br /><br />
    </li>
    <li>
      Privacy laws, which are broadly compatible with many other jurisdictions
      (for example, we support the rights of access and rectification
      for data subjects) <br/><br/>
    </li>
    <li>Comapny is hosted on AWS, in multiple regions, using VPC <br /><br /></li>
  </ul>
  <p>
    You'll find more information on each of these points
    in the detailed chapters documents below.
  </p>
</div>

.anchor {
  display: block;
  height: 63px;
  /* this is the height of your header */
  margin-top: -63px;
  /* this is again negative value of the height of your header */
  visibility: hidden;
}

任何人都可以帮忙解决这个问题。

Answer 1

一种常见的方法是通过CSS将不可见的伪元素添加到链接的原始目标元素，如下所示：

#Overview::before { 
  display: block; 
  content: " "; 
  margin-top: -63px; 
  height: 63px; 
  visibility: hidden; 
}

这将＆＃34;延伸＆＃34;具有该ID的元素，使得锚点在主元素上方63px（可以是任何值），而不会导致任何其他可见的更改。

注意：我会将Overview ID直接分配给h2元素，而不是额外的span

这是一个片段示例：

＆＃13;

html,
body {
  margin: 0;
}

.header {
  position: fixed;
  width: 100%;
  height: 60px;
  top: 0;
  left: 0;
  background: #d75;
}

.something_in_between {
  height: 500px;
  background: #75f;
  padding-top: 70px;
}

#Overview {
  background: yellow;
  height: 500px;
}

#Overview::before {
  display: block;
  content: " ";
  margin-top: -63px;
  height: 63px;
  visibility: hidden;
}

＆＃13;

<div class="header">Fixed Header</div>
<div class="something_in_between">Here's the <a href="#Overview">LINK</a> to the "Overview" element</div>
<div id="Overview">This should be visible when clicking the link</div>

＆＃13;

链接在同一页面内

1 个答案: