首先移动端固定位置 是为了防止下面内容过多出现滚动条的时候 可以一直让头部固定位置 不会出现随着滚动条滚动 消失在上方
那么需要注意的几个问题是 在写fixed的时候 一些必要的属性一定要注意写上 下面是我在编写过程中出现的bug:
这是我最开始写的 页面效果出来后 也是可以的,我头部部分下面 的一部分 我写的是positon:relative 属性 但是当我把下面的一个部分去掉之后 会出现下面这种情况:
经过检测 把上面的上 左 右 全部 为0之后 下面的position 换乘margin-top 就可以解决了 这个问题
所以一些必要的属性必须要写上 不然后期会出现一些不必要的问题 以后要谨记!!
下面是我从网上搜到的一些关于头部和固定位置的不错的写法 原文地址:http://caibaojian.com/mobile-position-fixed.html
很实用 有需要的可以看一下:
<body class="layout-fixed">
<header>
<!-- fixed定位的头部 -->
</header>
<!-- 下面是可以滚动的区域 -->
<main>
<!-- 内容在这里... -->
</main>
<!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>
header, footer, main {
display: block;
}
header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}
footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}
main {
/* main绝对定位,进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
/* 增加该属性,可以增加弹性 */
-webkit-overflow-scrolling: touch;
}
main .content {
height: 2000px;
}