Question

所以我在大约2个月的工作经验上还算是新手。但是，我有一个不好的习惯，就是跳到下一个主题，而没有练习只是假设自己会保留下来，这导致我在尝试启动项目时要么忘记要么挣扎。因此，我正在尝试打破这种习惯，以便我能够掌握它，这使我想到了这个问题。我的导航资产“粘滞”有麻烦。

HTML

    <div class="header">
    <div class = "intro">
      <h2 class = "introduction">Hello, I'm <br></h2>
    </div>
</div>

<ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

<div class="container">
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
</div>

CSS

body{
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu', sans-serif;
  background-color: #393c42;
}
.container {
  margin: auto;
   max-width: 900px;
}

.header{
  min-height: 900px;
  background-color: #393c42;
  padding: 0;
  margin: 0;
}

.intro {
}

.introduction {
  font-size: 50px;
  text-align: center;
  padding-top: 400px;
  font-family: 'Permanent Marker',sans-serif;
  color: #6bd3e5;
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

.active {
    background-color: #6bd3e5;
}

h2 {
  padding: 0;
  margin: 0;
}

.projectSquares {
  width: 40%;
  background: #333;
  padding-bottom: 30%;
  float:left;
   margin: 1%;
}

基本上，我正在尝试使用以下位置：粘滞，但已停止工作。我将所有.projectSquares div放入后似乎退出工作，但看不到如何。我认为有些事情与之冲突，但我无法弄清楚。任何帮助将不胜感激，如果我的代码没有任何意义，我深表歉意。

此外，如果有一种更简单的方法来获得横幅图像/导航效果下方的粘性导航，那么任何指针都会很棒。

Answer 1

position: sticky 要记住的重要一点是，直到您滚动到某个点之前，它都被视为相对定位的元素。由于其（初始）相对位置，因此容器正方形实际上从父.container继承了其高度，而父.container没有定义高度。

您可以给父母overflow: hidden定义的 height ，也可以给 overflow: hidden 。

将.container应用于body { margin: 0; padding: 0; font-family: 'Ubuntu', sans-serif; background-color: #393c42; } .container { margin: auto; max-width: 900px; overflow: hidden; } .header { min-height: 900px; background-color: #393c42; padding: 0; margin: 0; } .intro {} .introduction { font-size: 50px; text-align: center; padding-top: 400px; font-family: 'Permanent Marker', sans-serif; color: #6bd3e5; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } li { float: right; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } .active { background-color: #6bd3e5; } h2 { padding: 0; margin: 0; } .projectSquares { width: 40%; background: #333; padding-bottom: 30%; float: left; margin: 1%; }可以解决此问题，如下所示：

<div class="header">
  <div class="intro">
    <h2 class="introduction">Hello, I'm <br></h2>
  </div>
</div>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

<div class="container">
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
  <div class="projectSquares"></div>
</div>

{{1}}

Answer 2

尝试将！重要放在CSS代码旁边。根据您的情况，尝试位置：粘性！important

我的导航栏“位置问题”已停止工作，我不知道为什么

2 个答案: