美文网首页
移动端nav固定在顶部

移动端nav固定在顶部

作者: 困猫喵 | 来源:发表于2019-11-07 14:11 被阅读0次

实例代码:


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>

相关文章

网友评论

      本文标题:移动端nav固定在顶部

      本文链接:https://www.haomeiwen.com/subject/pcnibctx.html