如何用屏幕剪辑顶部栏

Question

如何用屏幕剪辑我的顶栏。因此，当我向下翻页时，我的意思是向下滚动页面，顶部栏也应该移动。就像在Facebook中一样，顶部栏在屏幕上移动。 我在过去2小时内搜索谷歌。但无法得到，我们称之为。

我的HTML / CSS是..

#topnavbar
{
 width:100%;
 height:50px;
 background-image:url('top.jpg');
 background-repeat:repeat-x;
}

HTML

 <div id="topnavbar">

 </div>

Answer 1

您正在谈论将导航栏的位置固定在屏幕顶部，对吗？

top:0;position:fixed;

-

#topnavbar {
 width:100%;
 height:50px;
 background-image:url('top.jpg');
 background-repeat:repeat-x;
 top:0;
 position:fixed;
}

Answer 2

在CSS中，position元素是一个基本概念。在这种情况下，您需要fixed位置。根据{{​​3}}，您应遵守fixed位置元素的以下准则：

  

不要为元素留出空间。相反，将它定位在   指定相对于屏幕视口的位置，不移动   滚动时打印时，将其放在固定位置上   每一页。

重申一下，如果您想将元素保持在相同位置，无论页面滚动到何处，请使用position:fixed

#topnavbar{
    position:fixed;
}

MDN

Answer 3

您需要搜索的是如何使用css属性position: fixed;将div或其他元素保留在相对于其包含元素的位置。

非常快速而粗略的例子：

http://jsfiddle.net/c93cK/

Answer 4

似乎页面上有某种图像滑块。所以我建议你也包括 z-index 。

#topnavbar
{
 width:100%;
 height:50px;
 background-image:url('top.jpg');
 background-repeat:repeat-x;
 position:fixed;
 z-index:500;
}