固定菜单

Question

请在此处找到我的代码：https://jsfiddle.net/kbvwpo76/

我想在页面顶部创建一个带有hsla效果的固定菜单。 在上面的链接中，您可以找到包含一些随机内容的示例。

我现在的问题是内容在后面菜单开始。 但是，我希望内容在 菜单下方开始，当我向下滚动菜单时，菜单会保留，而内容会在菜单后面消失。

为了达到这个目的，我需要在代码中进行哪些更改？

Answer 1

您可以将标题放在高度设置的正常位置元素中。

<div class="nav-wrapper">
  <div class="navigation_desktop">
    <div class="button_desktop_01">1.0 Main Menu </div>
    <div class="button_desktop_01">2.0 Main Menu </div>
  </div>
</div>

CSS：

.navigation_desktop{
    float: left;
    width: 100%;
    margin: 2%;
    position: fixed;
}

.button_desktop_01{
     float: left;
     width: 20%;
     cursor: pointer;
     background: hsla(0, 100%, 50%, 0.5);
 }
.nav-wrapper {
     height: 30px;
}