如何创建一个占据空间的div，其位置是固定的？

Question

我想创建一个div（位于顶部），它有自己的空间，并且它的位置是固定的。要求是当它向下滚动时，它必须移动并且在向上滚动时它应该返回到它自己的空间。

当位置固定时，它会上下移动。但它失去了它的空间。如何实现空间呢？ 提前谢谢。

Answer 1

这就是你要追求的吗？

http://jsfiddle.net/danhaswings/a1zb6ye9/

<强> HTML

<div class="container">
    <div class="navbar"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore itaque doloremque delectus incidunt deleniti, excepturi, saepe nesciunt asperiores quae repellendus quisquam consequatur. Vero tenetur saepe eos ipsum harum culpa velit alias blanditiis maiores libero voluptates autem nostrum dolorem dolorum, beatae ullam. Explicabo tenetur necessitatibus modi illum alias! Eius enim accusantium, totam quibusdam fuga aliquam quod numquam. Consequuntur et ipsum earum voluptatum iure soluta necessitatibus minima unde nesciunt repellendus excepturi quod, exercitationem voluptates. Veniam temporibus aliquam amet maxime ex, voluptatibus ipsum consequatur quibusdam laborum, itaque reprehenderit. Optio dignissimos, maiores, debitis accusamus itaque corporis laboriosam nisi fuga! Quas porro eos qui, numquam.</p>
</div>

<强> CSS

.container {
    min-height: 2000px;
    padding-top: 100px;
}

.navbar {
    height: 100px;
    width: 100%;
    background-color: #999;
    position: fixed;
    top: 0;
}