移动端nav固定在顶部

实例代码:


html部分:

<header class="header-box">

<div class="header-top">

</div>

<div class="header-bottom">

</div>

</header>

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>



css部分:

<style>

html{

height:100%;

overflow:hidden;  //禁用滚动条,实现相对于document的绝对定位代替固定定位。

    }

body{

height:100%;

overflow:auto;  //添加滚动条

    }

ul{

margin-top:179px;

list-style:none;

}

.header-box{

/*position:fixed;*/

        position:absolute;

left:0;

top:0;

width:100%;

height:179px;

background:#ef3229;

}

ul>li{

height:350px;

border-bottom:1px solid black;

}

</style>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 5,887评论 0 1
  • 不会用代码框,所以看着有些乱套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 5,477评论 0 0
  • 1. 默认的内外边距不同 问题: 各个浏览器默认的内外边距不同 解决: *{margin:0;padding:0;...
    jslxm阅读 4,282评论 0 2
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,391评论 0 11
  • 《它》 ——瘦桶 我知会在某个转角不期而遇 却忘记把心带回来 我想它不会再孤单 偶尔会在梦里弄湿了枕头 ...
    瘦桶阅读 3,240评论 0 57