当锚点遇到fixed定位

来源：互联网发布：python 字符串替换代码编辑：程序博客网时间：2024/06/05 12:32

简介：
当点击页面的锚点时会跳转到指定id的元素，而实际表现的是滚动条滚动使指定id元素对齐滚动条所处元素的【顶端】。如果当页面上方出现fixed定位时，将会出现锚点定位不准确的情况。
1、问题重现
当使用锚点时，页面上方存在fixed定位，将会出现如下情况（点击“目录二”对应跳转“内容二”的锚点）：
这里写图片描述

<!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、效果如下（没有变化）：
这里写图片描述

<!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、代码如下：

<!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、代码如下：

<!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>

3、结束语
3.1、本文有任何错误，或有任何疑问，欢迎留言说明。

阅读全文

0 0