jquery - jQuery 影响不同元素后禁用 Css 悬停效果

Question

我设置了一个 jQuery 滚动函数，使标题元素具有粘性并固定在页面顶部。这部分工作顺利。然而，一旦它被修复，导航链接就不再显示悬停效果。我对此摸不着头脑，因为 jQuery 事件根本不应该影响导航部分。我认为这是侥幸或打字错误，但在这里重新创建一个基本版本给出了同样的问题:

CodePen

尝试将鼠标悬停在左上角的 3 个链接上，它们会变成粗体。但是当你向下滚动直到“标题”停留时，再试一次 - 没有。谁能引导我朝着正确的方向前进？谢谢!

HTML

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Other</a></li>
    <li><a href="#">Thing</a></li>
  </ul>
</nav>

<h1 id="name" class="scrollName">TITLE</h1>

<div class="content">
  <h3>Stuff and Things</h3>
  <p>Bacon ipsum ... </p>
</div>

CSS

nav {
  height: 60px;
  position: fixed;
  width: 100%;
  top: 0;
  background-color: rgb(230, 230, 230);
  z-index: 5;
}

a {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  text-decoration: none;
  color: black;
}

a:hover {
  font-weight: 700;
}

li {
  display: inline;
  margin-right: 10px;
}

.scrollName {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 200px;
  z-index: 10;
}

.fixedName {
  position: fixed;
  width: 100%;
  top: 10px;
  margin: 0;
  text-align: center;
  z-index: 10;
}

.content {
  position: relative;
  width: 60%;
  margin: 0 auto;
  text-align: center;
  top: 300px;
}

Javascript

jQuery(document).ready(function() {
  var $nameOffset = jQuery("#name").offset().top;
  $nameOffset = $nameOffset - 9;

  jQuery(window).scroll(function() {
    var $scrollPos = jQuery(window).scrollTop();
    console.log($nameOffset);

    if ($scrollPos >= $nameOffset) {
      jQuery('#name').removeClass('scrollName').addClass('fixedName');
    } else {
      jQuery('#name').removeClass('fixedName').addClass('scrollName');
    };
  });

});

Answer 1

你需要设置z-index为999