HTML/CSS 使页眉和导航粘在页面顶部

标签 html css position sticky

目前正在做一个网络元素,我想在我的网站上设置一个粘性部分 那可能总是可用的。我尝试了不同的方法,但没有任何效果。

我的结构如下

<body>
  <wrap>
    <header></header>
    <nav></nav>
    <container></container>
  </wrap>
  <footer></footer>
</body>

如果你更喜欢一个方案,这是这个链接: http://s21.postimg.org/79tp8wu5z/structure_page.png

所以我想让我的标题导航和背景(应用于正文背景)粘在页面顶部。

我知道我需要使用固定的相对位置,但除了背景之外没有任何作用。

这是我的CSS:

body {
  background: url(img/bg.jpg) no-repeat center center;
  background-attachment: fixed;
  background-position: top;
}

.wrap {
  width: 960px;
  margin: 0 auto;
}

#header {
  height: 121px;
  position: relative;
}

#footer {
  height: 40px;
  background-color: #146992;
  position: relative;
}

.container {
  position:relative;
}

#menu {
  position:relative;
  height: 45px;
}

感谢您的帮助。

最佳答案

您还没有固定 nav 栏的位置。 尝试使用

#nav
 {
 background-color:#262626;
 width:100%;
 height:50px;
 box-shadow: 0px 1px 50px #5E5E5E;
 position:fixed;
 top:0px;
}

或者您可以使用 Twitter Bootstrap用于启动。

herehere .

关于HTML/CSS 使页眉和导航粘在页面顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16980302/

相关文章:

html - 我可以同时有多个 AJAX 请求吗?

php - 如何将 php 发送邮件表单与图像点击列表结合起来?

javascript - CSS3 变换和过渡的问题

javascript - 位置为 :fixed leaves gray trail after scrolling 的传单

Android:从纵向转为横向时的定位按钮

javascript - 应用程序在键盘弹出窗口上搞砸了

html - 图像不会与下拉菜单中的文本对齐

php - 为循环中的每个表行赋予唯一类

jquery - 当滚动到达某个点时使元素变粘的麻烦

mysql - 查找字符串位置并连接另一个表的行