创建固定导航栏答案

【问题标题】：Creating a fixed navbar创建固定导航栏
【发布时间】：2014-05-28 22:40:04
【问题描述】：

我有以下导航栏，如果设备的高度大于宽度，它会在页面滚动时向下滚动并更改位置，如果设备的高度大于宽度，它会显示在左侧的某个位置，然后在否则置顶。

我有这个执行代码：

#navbar li { display: inline; list-style-type: none; list-style-image: none; }

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

#navbar li { display: block; list-style-type: none; list-style-image: none; }

我需要代码来制作导航区域：

<div id = "navbar"> <input type="button" value="previous page" action="" name="previous page" onclick="doPrev();"/> <input type="button" value="next page" action="" name="next page" onclick="doNext();"/> <li><a href="numofchapters.htm">Number of chapters</a></li>

</div>

始终可见，即使在滚动时也是如此。这是怎么做到的？？？

【问题讨论】：

请提供工作小提琴。
什么？？？你至少应该知道如何做这些事情中的至少一件？？？
在工作小提琴中，我们提供解决方案会更容易。并不是我们应该从头开始编写它。您必须展示您尝试过什么？
这不是一个“为我写代码”的商店——你在完成后留下你的问题，以便其他人可以从你的提问中学习。我已恢复您删除原始问题的编辑。

标签： navigation

【解决方案1】：

您需要添加“位置：固定；”到您的 CSS 并分配比其他容器更高的 z-index（有些人使用“z-index: 100;”）。我在这个网站上了解了 z-index，尝试搜索！希望这会有所帮助。

【讨论】：

【解决方案2】：

第一次尝试是添加

position: fixed;

到菜单包装元素的 CSS。在你的情况下：#navbar ul

【讨论】：

【解决方案3】：

http://jsfiddle.net/LtBh6/

添加

#navbar {
position: fixed;
}

到您的 CSS 文件。您现在可能需要为下面的元素添加边距。

【讨论】：