Question

我有这个示例HTML5页面，其中包含导航和粘贴在JSFiddle上的内容区域。

问题是当我垂直滚动时<div id="nav">没有被修复。即使垂直滚动，如何才能将导航固定在浏览器的顶部？

Answer 1

body {
    margin: 0px;
    width: 100%;
    height: 120%;
    background: red;
}
#nav {
    position: fixed;
    width: 100%;
    z-index: 99;
    height: 25px;
    background: blue;
}

Answer 2

使用position:fixed和z-index属性（您遇到的问题是由于图层：fixed div位于#area div下）：

#nav{
   position:fixed;
   top:0;
   width:100%;
   height: 25px;
   z-index:50;
   background: blue;
}

Example

Answer 3

创建另一个隐藏的导航（与已使用的导航相同），并在用户向下滚动时显示它。

这是a good tutorial这样做。

以下是我网站上的some edited and working example。

修复div导航在滚动时隐藏

3 个答案: