简洁来说:
将导航栏最外部的盒子或者header的属性设置一个 position:fixed;
然后调试他的位置,fixed使其浮在页面上不受原本布局影响。
举例思路:
我设置一个header标签,里面的整体内容作为我的导航栏的内容
为了验证,你可以设置一张图片,高度高于页面的高度,需要有下滑栏
(因为我在做网页模仿,可以直接看到效果)
设置header样式
如下代码(header里面的div可以忽视,不影响)
css style:
.head {
position: fixed;
height: 6rem;
width: 100%;
right: 0;
top: 0;
z-index: 999;//一直将导航栏置于最顶层
background-color: white; //设置导航栏背景颜色
}
html:body
<header class="head">
<div class="headbox">
<div class="headLogo"></div>
<ul class="headul">
<li class="headli"><a ></a>首页</li>
<li class="headli"><a ></a>关于我们</li>
<li class="headli"><a ></a>Inverstor Relations
</li>
<li class="headli"><a ></a>瑞即购<span>TM</span>
</li>
<li class="headli"><a ></a>小鹿茶</li>
<li class="headli"><a ></a>最新活动</li>
<li class="headli"><a </a>企业用户</li>
<li class="headli"><a ></a></li>
</ul>
</div>
</header>
扩展使用:
所有一直需要出现在页面上的元素都可以采用 position:fixed;
例如:浮在页面上的回到顶部的图片等。