当锚点遇到fixed定位
简介：
当点击页面的锚点时会跳转到指定id的元素，而实际表现的是滚动条滚动使指定id元素对齐滚动条所处元素的【顶端】。如果当页面上方出现fixed定位时，将会出现锚点定位不准确的情况。
1、问题重现
当使用锚点时，页面上方存在fixed定位，将会出现如下情况（点击“目录二”对应跳转“内容二”的锚点）：
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { margin: 0; padding: 0; }
body { padding-bottom: 1000px; font-family: "Microsoft YaHei"; }
.header { background-color: #000; opacity: .5; filter:alpha(opacity=50);
height: 80px; width: 100%; position: fixed; z-index: 999; top: 0;
}
.section { margin-top: 100px; }
ul { position: fixed; right: 40px; top: 100px; }
ul li { margin-top: 10px; }
ul li a { color: #000; text-decoration: none; }
.container { width: 600px; margin: 0 auto; }
.test { margin-top: 50px; }
.test h2 { font-size: 18px; font-weight: 800; }
.test .box { width: 600px; height: 200px; background-color: #F46465; }
</style>
</head>
<body>
<div class="header"></div>
<div class="section">
<ul>
<li><a href="#test1">目录一</a></li>
<li><a href="#test2">目录二</a></li>
<li><a href="#test3">目录三</a></li>
<li><a href="#test4">目录四</a></li>
</ul>
<div class="container">
<div class="test">
<h2 id="test1">一、内容一</h2>
<div class="box"></div>
</div>
<div class="test">
<h2 id="test2">二、内容二</h2>
<div class="box"></div>
</div>
<div class="test">
<h2 id="test3">三、内容三</h2>
<div class="box"></div>
</div>
<div class="test">
<h2 id="test4">四、内容四</h2>
<div class="box"></div>
</div>
</div>
</div>
</body>
</html>
|
2、巧妙运用margin跟padding解决问题
2.1、尝试给“内容*”添加外边距 ==> margin-top:80px
2.1.1、效果如下（没有变化）：
2.1.2、代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { margin: 0; padding: 0; }
body { padding-bottom: 1000px; font-family: "Microsoft YaHei"; }
.header { background-color: #000; opacity: .5; filter:alpha(opacity=50);
height: 80px; width: 100%; position: fixed; z-index: 999; top: 0;
}
.section { margin-top: 100px; }
ul { position: fixed; right: 40px; top: 100px; }
ul li { margin-top: 10px; }
ul li a { color: #000; text-decoration: none; }
.container { width: 600px; margin: 0 auto; }
.test { margin-top: 50px; }
.test h2 { font-size: 18px; font-weight: 800; margin-top: 80px; }
.test .box { width: 600px; height: 200px; background-color: #F46465; }
</style>
</head>
<body>
<div class="header"></div>
<div class="section">
<ul>
<li><a href="#test1">目录一</a></li>
<li><a href="#test2">目录二</a></li>
<li><a href="#test3">目录三</a></li>
<li><a href="#test4">目录四</a></li>
</ul>
<div class="container">
<div class="test">
<h2 id="test1">一、内容一</h2>
<div class="box"></div>
</div>
<div class="test">
<h2 id="test2">二、内容二</h2>
<div class="box"></div>
</div>
<div class="test">
<h2 id="test3">三、内容三</h2>
<div class="box"></div>
</div>
<div class="test">
<h2 id="test4">四、内容四</h2>
<div class="box"></div>
</div>
</div>
</div>
</body>
</html>
|
2.1.3、结论：锚点定位跟外边距没有关系。
2.2、尝试给“内容*”添加内边距 ==> padding-top:80px
2.2.1、效果如下（虽然锚点定位准了但是却多出来内边距部分）：
2.2.2、代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { margin: 0; padding: 0; }
body { padding-bottom: 1000px; font-family: "Microsoft YaHei"; }
.header { background-color: #000; opacity: .5; filter:alpha(opacity=50);
height: 80px; width: 100%; position: fixed; z-index: 999; top: 0;
}
.section { margin-top: 100px; }
ul { position: fixed; right: 40px; top: 100px; }
ul li { margin-top: 10px; }
ul li a { color: #000; text-decoration: none; }
.container { width: 600px; margin: 0 auto; }
.test { margin-top: 50px; }
.test h2 { font-size: 18px; font-weight: 800; padding-top: 80px; }
.test .box { width: 600px; height: 200px; background-color: #F46465; }
</style>
</head>
<body>
<div class="header"></div>
<div class="section">
<ul>
<li><a href="#test1">目录一</a></li>
<li><a href="#test2">目录二</a></li>
<li><a href="#test3">目录三</a></li>
<li><a href="#test4">目录四</a></li>
</ul>
<div class="container">
<div class="test">
<h2 id="test1">一、内容一</h2>
<div class="box"></div>
</div>
<div class="test">
<h2 id="test2">二、内容二</h2>
<div class="box"></div>
</div>
<div class="test">
<h2 id="test3">三、内容三</h2>
<div class="box"></div>
</div>
<div class="test">
<h2 id="test4">四、内容四</h2>
<div class="box"></div>
</div>
</div>
</div>
</body>
</html>
|
2.2.3、结论：锚点定位跟内边距有关。
2.3、margin跟padding结合：锚点定位跟内边距有关并且与外边距无关。若单纯给内容添加内边距会影响到我们的页面。
所以我们给“内容*”加上padding-top:80px;margin-top:-80px;即解决我们的问题。
2.3.1、效果如下：
2.2.2、代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { margin: 0; padding: 0; }
body { padding-bottom: 1000px; font-family: "Microsoft YaHei"; }
.header { background-color: #000; opacity: .5; filter: alpha(opacity=50);
height: 80px; width: 100%; position: fixed; z-index: 999; top: 0;
}
.section { margin-top: 100px; }
ul { position: fixed; right: 40px; top: 100px; }
ul li { margin-top: 10px; }
ul li a { color: #000; text-decoration: none; }
.container { width: 600px; margin: 0 auto; }
.test { margin-top: 50px; }
.test h2 { font-size: 18px; font-weight: 800; padding-top: 80px; margin-top: -80px; }
.test .box { width: 600px; height: 200px; background-color: #F46465; }
</style>
</head>
<body>
<div class="header"></div>
<div class="section">
<ul>
<li><a href="#test1">目录一</a></li>
<li><a href="#test2">目录二</a></li>
<li><a href="#test3">目录三</a></li>
<li><a href="#test4">目录四</a></li>
</ul>
<div class="container">
<div class="test">
<h2 id="test1">一、内容一</h2>
<div class="box"></div>
</div>
<div class="test">
<h2 id="test2">二、内容二</h2>
<div class="box"></div>
</div>
<div class="test">
<h2 id="test3">三、内容三</h2>
<div class="box"></div>
</div>
<div class="test">
<h2 id="test4">四、内容四</h2>
<div class="box"></div>
</div>
</div>
</div>
</body>
</html>
|
