粘贴菜单时，CSS 粘性菜单链接不起作用

Question

JSFiddle code here

我正在尝试制作一个纯 CSS 的粘性菜单(无 JavaScript)。向下滚动时，将鼠标悬停在菜单项上不再有效。我不确定为什么不。

CSS:

* {
  margin: 0;
  padding: 0;
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

body {
  max-width: 960px;
  margin: auto;
}

.cont2 h1 {
  background: black;
  color: lightskyblue;
  padding: 10px;
}

.cont2 nav ul {
  list-style-type: none;
  background: lightskyblue;
  padding: 20px;
}

.cont2 nav ul li {
  display: inline-block;
}

.cont2 nav ul li a {
  text-decoration: none;
  padding: 20px;
  color: black;
  text-transform: uppercase;
}

.cont2 nav ul li a:hover {
  background: black;
  color: orange;
}

.sticky-nav {
  position: sticky;
  box-sizing: border-box;
  top: 0;
}

我不在这里发布 HTML，因为它太多了。

Answer 1

你需要设置 z-index:1; 到类 .sticky-nav

这是更新后的片段:

* {
  margin: 0;
  padding: 0;
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

body {
  max-width: 960px;
  margin: auto;
}

.cont2 h1 {
  background: black;
  color: lightskyblue;
  padding: 10px;
}

.cont2 nav ul {
  list-style-type: none;
  background: lightskyblue;
  padding: 20px;
}

.cont2 nav ul li {
  display: inline-block;
}

.cont2 nav ul li a {
  text-decoration: none;
  padding: 20px;
  color: black;
  text-transform: uppercase;
}

.cont2 nav ul li a:hover {
  background: black;
  color: orange;
}

.sticky-nav {
  position: sticky;
  box-sizing: border-box;
  top: 0;
  z-index: 1;
}

<div class="container cont2">
  <h1> Main Heading </h1>

  <nav class="sticky-nav">
    <ul>
      <li><a href="#"> Page One </a></li>
      <li><a href="#"> Page Two </a></li>
      <li><a href="#contact"> Contact </a></li>
    </ul>
  </nav>
  <div class="row">
    <div class="col">
      <h2> LOREM IPSUM </h2>

      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="col">
      <h2> LOREM IPSUM </h2>

      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div class="row" id="contact">
    <h2> CONTACT ME </h2>

    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>