anchor-link-with-fixed-header

2019-08-16 admin

背景

复现

当页面中带有position:fixedheader时,通过id进行定位时,一般会有偏差。一般常见于文档页面,复现如下: 点击右侧的目录,快速定位至title2,结果被header遮住(为方便观察,header设置opacity:0.95)。 图片描述

期望实现

期望能实现准确定位。

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;
}

解决后效果

纠正偏移后,能准确定位,且不影响页面布局。 图片描述

修复后的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>

原创说明

[转载]原文链接:https://segmentfault.com/a/1190000020091879

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72673.html

文章标题:anchor-link-with-fixed-header

相关文章
移动端fixed元素不显示的一种解决方法
上几周给公司app做了一个html5嵌套页面,页面并不复杂,展示内容较多,底部有footer html结构如下 &lt;style&gt; .main{ position: absolute; top: 0; b...
2018-08-01
【vue】一起来简化开发吧!开发常用组件 HeaderForm
前言 各位在开发 vue 后台管理项目的时候,有没有碰到 【搜索条件】 + 【表格】 这样组合的页面呢。 今天要讲的是头搜索条件,我在开发时后台管理项目时非常常见,所以有没有更简单的写法呢,比如这样 ↓↓↓ 反正我是经常会遇到的哈,...
2018-03-21
VsCode 添加文件头部注释和函数注释[koroFileHeader]
以前发过这个插件,这回版本升级了一下,修复了以前默认配置项不能删除,顺序不能移动的问题,并且新增了光标处添加函数注释的功能,也重写了一遍readme,所以再推广一下这个插件,下一步计划是支持其他语言的注释。 以下是readme正文。 ...
2018-10-17
Fixed with absolute
A few concepts offsetWidth: gives you the width the element takes up in pixels. offsetHeight: gives you the height the ...
2018-05-01
next.js with mobx
github 关于状态管理 为什么需要状态管理? 因为层次深,很不爽 数据和行为分离,是个不错的实践 为什么是mobx,而不是redux或者直接context redux 用好久了,尝试下新的,样板代码太多了,很不爽 co...
2018-08-04
With TypeScript 2.8+ :更好的 React 组件开发模式
近两年来一直在关注 React 开发,最近也开始全面应用 TypeScript 。国内有很多讲解 React 和 TypeScript 的教程,但如何将 TypeScript 更好地应用到 React 组件开发模式的文章却几乎没有(也可能是...
2018-06-12
React Native with MobX — 入门
在这里,我们将结合MobX和React Native来创建一个简单的列表应用程序。 如果您正在寻找如何开始使用MobX和React Native,那么这应该是一个很好的选择。 想学习React Native? 查看 React Native...
2018-08-11
我是如何通过debug成功甩锅浏览器的:解决fixed定位元素,在页面滚动后touch事件失效问题
如果你关注我应该知道,我最近对PC端页面进行移动适配。在这个过程中,为了节省用户300ms的时间,同时给予用户更及时的点击反馈(这意味着更好的用户体验),我在尝试使用移动端独有的 touchstart 事件替代传统的 click 事件,这过...
2018-03-01
Vue with typescript
目前 Vue 和 TypeScript 的配合还不算很完美,Vuex 和 TypeScript 的配合挺糟糕的,尝试需要谨慎 如果想体验一下的话,强烈建议你用 vue-cli 3 直接生成项目目录,这样会少挺多配置,比如配 tsconfig...
2018-10-29
transform与position:fixed的那些恩怨
1. 前言 在写这篇文章之前,我理解的fixed元素是这样的:(摘自CSS布局基础) 固定定位与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除...
2018-02-05
回到顶部