如何创建一个位置固定的占用空间的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;
}