anchor-link-with-fixed-header

2019年9月13日 132次阅读 来源: davidshi

背景

复现

当页面中带有position:fixed的header时，通过id进行定位时，一般会有偏差。一般常见于文档页面，复现如下：
点击右侧的目录，快速定位至title2，结果被header遮住（为方便观察，header设置opacity:0.95）。
《anchor-link-with-fixed-header》

期望实现

期望能实现准确定位。

demo代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Fixed header anchor offset</title>
</head>
<style>
* {margin: 0;padding: 0;}
html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
#app {
  width: 100%;
  --header-height: 30px;
}
#app header {
  display: block;
  width: 100%;
  height: var(--header-height);
  position: fixed;
  top: 0;
  z-index: 99;
  background-color: #d1d1d1;
  text-align: center;
  font-size: 14px;
  font-weight: bolder;
  line-height: var(--header-height);
  opacity: 0.95;
}
#app #main {
  position: relative;
  top: var(--header-height);
}
#app #catalog {
  position: fixed;
  top: 60px;
  right: 30px;
  background: #f5f5ff;
  box-shadow: 0px 0px 6px #666;
  padding: 5px 10px;
}
#app #catalog > a {
  display: block;
  height: 25px;
  line-height: 25px;
  padding: 2px 4px;
  text-decoration: none;
}
#app #catalog > a:hover {
  background-color: aquamarine;
}
</style>
<body>
  <div id="app">
    <header>Header Here</header>
    <div id="main">
      <h3 id="title1">title1</h3>
      <div class="section-1" style="height: 300px;background-color:aliceblue;"></div>
      <h3 id="title2">title2</h3>
      <div class="section-2" style="height: 900px;background-color:cornflowerblue;"></div>
      <h3 id="title3">title3</h3>
      <div class="section-3" style="height: 600px;background-color:darkkhaki;"></div>
      <h3 id="title4">title4</h3>
      <div class="section-4" style="height: 800px;background-color:gold;"></div>
    </div>
    <div id="catalog">
      <a href="#title1">title1</a>
      <a href="#title2">title2</a>
      <a href="#title3">title3</a>
      <a href="#title4">title4</a>
    </div>
  </div>
</body>
</html>

解决问题

思路

给每个anchor设置偏移，纠正这个偏差。

代码

给每个锚点h3增加css属性：

#app #main h3::before {
  content: "";
  display: block;
  height: var(--header-height);
  margin-top: calc(var(--header-height) * -1);
  visibility: hidden;
}

解决后效果

纠正偏移后，能准确定位，且不影响页面布局。
《anchor-link-with-fixed-header》

修复后的html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Fixed header anchor offset</title>
</head>
<style>
* {margin: 0;padding: 0;}
html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
#app {
  width: 100%;
  --header-height: 30px;
}
#app header {
  display: block;
  width: 100%;
  height: var(--header-height);
  position: fixed;
  top:0;
  z-index: 99;
  background-color: #d1d1d1;
  text-align: center;
  font-size: 14px;
  font-weight: bolder;
  line-height: var(--header-height);
}
#app #main {
  position: relative;
  top: var(--header-height);
}
#app #main h3::before {
  content: "";
  display: block;
  height: var(--header-height);
  margin-top: calc(var(--header-height) * -1);
  visibility: hidden;
}
#app #catalog {
  position: fixed;
  top: 60px;
  right: 30px;
  background: #f5f5ff;
  box-shadow: 0px 0px 6px #666;
  padding: 5px 10px;
}
#app #catalog > a {
  display: block;
  height: 25px;
  line-height: 25px;
  padding: 2px 4px;
  text-decoration: none;
}
#app #catalog > a:hover {
  background-color: aquamarine;
}
</style>
<body>
  <div id="app">
    <header>Header Here</header>
    <div id="main">
      <h3 id="title1">title1</h3>
      <div class="section-1" style="height: 300px;background-color:aliceblue;"></div>
      <h3 id="title2">title2</h3>
      <div class="section-2" style="height: 900px;background-color:cornflowerblue;"></div>
      <h3 id="title3">title3</h3>
      <div class="section-3" style="height: 600px;background-color:darkkhaki;"></div>
      <h3 id="title4">title4</h3>
      <div class="section-4" style="height: 800px;background-color:gold;"></div>
    </div>
    <div id="catalog">
      <a href="#title1">title1</a>
      <a href="#title2">title2</a>
      <a href="#title3">title3</a>
      <a href="#title4">title4</a>
    </div>
  </div>
</body>
</html>

原创说明

    原文作者：davidshi
    原文地址: https://segmentfault.com/a/1190000020091879
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞