当锚点遇到fixed定位

最新推荐文章于 2024-07-16 15:17:26 发布

kakaxiD

最新推荐文章于 2024-07-16 15:17:26 发布

阅读量3.3k

点赞数 4

分类专栏：个人日记文章标签：锚点

本文链接：https://blog.csdn.net/kakaxiD/article/details/78603024

版权

个人日记专栏收录该内容

108 篇文章 1 订阅

订阅专栏

简介：
当点击页面的锚点时会跳转到指定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、本文有任何错误，或有任何疑问，欢迎留言说明。

kakaxiD

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
当锚点遇到fixed定位

简介：当点击页面的锚点时会跳转到指定id的元素，而实际表现的是滚动条滚动使指定id元素对齐滚动条所处元素的【顶端】。如果当页面上方出现fixed定位时，将会出现锚点定位不准确的情况。 1、问题重现当使用锚点时，页面上方存在fixed定位，将会出现如下情况（点击“目录二”对应跳转“内容二”的锚点）： <!DOCTYPE html><html><head> <meta chars
复制链接

扫一扫