Question

所以我有这个标记：

<header>
    <h1> Movy </h1>
    <span class="tools" style='display: none'>
        <button id='edit'>
            <i class="fa fa-pencil"></i>
        </button>
        <button id='check'>
            <i class="fa fa-check"></i>
        </button>
        <button id='trash'>
            <i class="fa fa-trash-o"></i>
        </button>
    </span>
</header>

<nav id='nav'>
    <ul class='navbar-nav'>
        <li id='came-out'>Came Out</li>
        <li class='active' id='coming-soon'>Coming Soon</li>
        <li id='watched'>Watched</li> 
    </ul>
</nav>
...

我想要修复标题，然后滚动导航栏。
所以我把它添加到CSS：

header {
  position: fixed;
  width: 100%;
  z-index: 1000;
}

nav { 
  margin-top: 1em;
}

但the result不是我想要的。我尝试将clear: both添加到每个元素但没有任何变化 编辑： This应该是这样的，但标题应该是固定的。

Answer 1

您需要将标题的高度设置为固定高度（以em或px为单位）。然后使用相同的数字为您的身体添加衬垫顶部。

body {
    background: #e5e5e5;;
    font-family: 'Roboto Condensed', 'Calibri', 'Arial', sans-serif;
    margin: 0; padding: 0;
    color: #444;
    height: 2000px;
    padding-top: 50px;
}

header {
    background: #4285f4;
    color: white;
    padding: 12px;
    padding-left: 15px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    height: 26px;
    margin: 0;
    top: 0;
}

并带走导航的边缘。

选中Fiddle。

Answer 2

为导航和页面的其余部分添加包装div，并设置margin-top以清除标题div。

<header>
    <h1> Movy </h1>
    <span class="tools" style='display: none'>
    <button id='edit'>
        <i class="fa fa-pencil"></i>
    </button>
    <button id='check'>
        <i class="fa fa-check"></i>
    </button>
    <button id='trash'>
        <i class="fa fa-trash-o"></i>
    </button>
    </span>
</header>

<div id='wrapper'>
<nav id='nav'>
    <ul class='navbar-nav'>
        <li id='came-out'>Came Out</li>
        <li class='active' id='coming-soon'>Coming Soon</li>
        <li id='watched'>Watched</li> 
    </ul>
</nav>
</div>

CSS：

header {
  position: fixed;
  width: 100%;
  z-index: 1000;
  top:0;
}

.wrapper { 
  margin-top: 3em;
  display:block;
}

上面没有固定导航栏的固定标题

2 个答案: