当锚点遇到fixed定位
Ooo_My_God发表于 分类： 阅读(9109) 评论()
简介： 当点击页面的锚点时会跳转到指定id的元素，而实际表现的是滚动条滚动使指定id元素对齐滚动条所处元素的【顶端】。如果当页面上方出现fixed定位时，将会出现锚点定位不准确的情况。
1、问题重现 当使用锚点时，页面上方存在fixed定位，将会出现如下情况（点击“目录二”对应跳转“内容二”的锚点）：
代码如下：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
&!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、代码如下：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
&!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、代码如下：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
&!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:80margin-top:-80即解决我们的问题。 2.3.1、效果如下：
2.2.2、代码如下：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
&!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、本文有任何错误，或有任何疑问，欢迎留言说明。
如果觉得我的文章对您有用，请随意打赏。您的支持将是我继续创作的动力！
相关推荐  评论\ 经验分享
关于苹果手机微信端 position: fixed定位top导航栏问题
在移动端,position: fixed定位一般不被识别,或者在ios系统中,获取input焦点时,会导致position: fixed的top失效,下面是我验证过的方法,大家可以试试.
&!doctype html&
&meta charset=&utf-8&&
&meta name=&viewport& content=&width=device-width,initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no& /&
&title&无标题文档&/title&
header, footer, main {
height: 50
height: 34
bottom: 0;
/ main绝对定位，进行内部滚动 /
bottom: 34
/ 使之可以滚动 /
overflow-y:
border:# / main区分 /
main .content {
height: 2000
border:#A45052 5/ .content区分 /
&body class=&layout-scroll-fixed&&
&!-- fixed定位的头部 --&
&!-- 可以滚动的区域 --&
&div class="content"&
&input type="text" placeholder="Footer..."/&
&!-- 测试看看... --&
&!-- fixed定位的底部 --&
&input type="text" placeholder="Footer..."/&
&button class="submit"&提交&/button&
在android中
overflow-y: scroll的导航框可能会显示不出来(可能是部分吧!没有测试过,我的手机是显示不出来),但是它确实是存在的
若觉得本文不错，就分享一下吧！
请登录后，发表评论
评论加载中...
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11移动端fixed定位固定在底部 ios手机里为什么会遮住一半 css_百度知道
移动端fixed定位固定在底部 ios手机里为什么会遮住一半 css
我有更好的答案
fixed 不占据文档流。 你可以让body padding-top
一个底部foot的高度就行了
采纳率：70%
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
底部每次都先消失，安卓正常，ios有问题
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
放弃fixed布局吧，iOS全线都对这个支持不好，而且也没有什么好的解决办法。其实fixed在有些安卓上支持也不好，比如个别小米的浏览器。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
以前遇到过，没有特别好的解决办法，可以看看iScroll.js
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
同其它人回答，ios有優先於瀏覽器使用行為的定義，你無法有效操控又或者你得寫出非常全面的翻轉及滑動行為偵測(event listener)，最後才去得到window的inner.height不然一般寫法是搞不定的
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}