Question

我无法集中我的粘性导航。在我把它放在中心后，它停止了滚动页面。任何帮助将非常感谢我已经看了一段时间，我不知道问题是什么。

＆＃13;

.navContainter {
  width: 960px;
}
.nav {
  height: 60px;
  background-color: rgba(0, 0, 0, 0.7);
  position: -webkit-sticky;
  list-style-type: none;
  text-align: center;
}
.nav ul {
  margin: 0 auto;
  padding-left: 0px;
  padding-top: 10px;
  display: inline-block;
}
ul {
  display: inline;
  padding: 0;
}
li {
  display: inline;
  padding: 5px;
  font-size: 1.5em;
  float: left;
  margin-right: 50px;
  margin-left: 100px;
  position: relative;
  font-family: "Josefin Slab", serif;
}
a {
  width: 60px;
  color: #fff;
}
.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}

＆＃13;

<head class="navContainer">
  <nav class="nav">
    <ul>
      <li><a href="web.html">WEB</a></li>
      <li><a href="photo.html">PHOTOGRAPHY</a></li>
      <li><img src="img/demo/_small/logo.png"></li>
      <li><a href="design.html">DESIGN</a></li>
      <li><a href="video.html">VIDEO</a></li>
    </ul>
  </nav>
</head>

＆＃13;

Answer 1

根据我对粘性导航的经验，我会将导航包装在一个包含以下元素的容器中：

position: fixed;
z-index: 9999;

内容看起来像这样：

.content_main{
margin: 0px 0px 0px 0px;
background: url(../images/concrete_seamless.png) repeat 0 0;
padding:  105px 0px 0px 0px;
z-index:5;
overflow: hidden;
display: inline-block;
position: relative;
}

z-index差异和conent的相对位置，在页面滚动时将内容设置为隐藏在导航下，而固定位置使导航粘贴到浏览器。

我从不使用webkit：sticky;

粘性导航不会停留在滚动浏览器的顶部

1 个答案: