“位置：粘性；” 无法正常工作的CSS和HTML

Question

我想使导航栏在滚动到顶部时停留在顶部，但是它不起作用，我也不知道为什么。如果可以的话请帮我，这是我的HTML和CSS代码：

.nav-selections {

  text-transform: uppercase;

  letter-spacing: 5px;

  font: 18px "lato",sans-serif;

  display: inline-block;

  text-decoration: none;

  color: white;

  padding: 18px;

  float: right;

  margin-left: 50px;

  transition: 1.5s;

}



.nav-selections:hover{

  transition: 1.5s;

  color: black;

}



ul {

  background-color: #B79b58;

  overflow: auto;

}



li {

  list-style-type: none;

}


<nav style="position: sticky; position: -webkit-sticky;">

  <ul align="left">

    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>

    <li><a href="#/about" class="nav-selections">About</a></li>

    <li><a href="#/products" class="nav-selections">Products</a></li>

    <li><a href="#" class="nav-selections">Home</a></li>

  </ul>

</nav>

Answer 1

粘性定位是相对定位和固定定位的混合。将该元素视为相对位置，直到它超过指定的阈值为止，此时将其视为固定位置。
…

您必须指定的至少一个阈值top，right，bottom，或left为粘稠定位像预期的那样。否则，将无法与相对位置区分开。[资料来源：MDN ]

因此，在您的示例中，您必须使用top属性来定义最终应粘贴的位置。

html, body {

  height: 200%;

}



nav {

  position: sticky;

  position: -webkit-sticky;

  top: 0; /* required */

}



.nav-selections {

  text-transform: uppercase;

  letter-spacing: 5px;

  font: 18px "lato", sans-serif;

  display: inline-block;

  text-decoration: none;

  color: white;

  padding: 18px;

  float: right;

  margin-left: 50px;

  transition: 1.5s;

}



.nav-selections:hover {

  transition: 1.5s;

  color: black;

}



ul {

  background-color: #B79b58;

  overflow: auto;

}



li {

  list-style-type: none;

}


<nav>

  <ul align="left">

    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>

    <li><a href="#/about" class="nav-selections">About</a></li>

    <li><a href="#/products" class="nav-selections">Products</a></li>

    <li><a href="#" class="nav-selections">Home</a></li>

  </ul>

</nav>