当锚点遇到fixed定位

Ooo_My_God发表于 分类:css 阅读(5808) 评论(16)

简介:

当点击页面的锚点时会跳转到指定id的元素,而实际表现的是滚动条滚动使指定id元素对齐滚动条所处元素的【顶端】。如果当页面上方出现fixed定位时,将会出现锚点定位不准确的情况。

1、问题重现

当使用锚点时,页面上方存在fixed定位,将会出现如下情况(点击“目录二”对应跳转“内容二”的锚点):

代码如下:

2、巧妙运用margin跟padding解决问题

2.1、尝试给“内容*”添加外边距 ==> margin-top:80px

2.1.1、效果如下(没有变化):

2.1.2、代码如下:

2.1.3、结论:锚点定位跟外边距没有关系。

2.2、尝试给“内容*”添加内边距 ==> padding-top:80px

2.2.1、效果如下(虽然锚点定位准了但是却多出来内边距部分):

2.2.2、代码如下:

2.2.3、结论:锚点定位跟内边距有关。

2.3、margin跟padding结合:锚点定位跟内边距有关并且与外边距无关。若单纯给内容添加内边距会影响到我们的页面。

所以我们给“内容*”加上padding-top:80px;margin-top:-80px;即解决我们的问题。

2.3.1、效果如下:

2.2.2、代码如下:

3、结束语

3.1、本文有任何错误,或有任何疑问,欢迎留言说明。

如果觉得我的文章对您有用,请随意打赏。您的支持将是我继续创作的动力! ¥ 打赏支持 ¥

本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

http://www.ydcss.com/archives/209

相关推荐

评论

回复给XXX取消回复

说点什么吧...

网友最新评论 (16)

  1. 我的也是,这个问题解决了,上面被覆盖掉的遮罩部分的交互又会有问题

    454 11-18 00:03 回复
    • 你好,本示例,遮罩层就是一个fixed定位的导航,导航下面的内容是不需要交互的呀。

      YDCSS 11-20 15:11
  2. 露珠好几只

    幽子墨 12-20 10:18 回复
  3. 试试

    X-XXX 01-16 09:40 回复
输入关键字