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

Answer 2

将 z-index 设置为 999，问题将得到修复

Answer 3

你可以添加指针事件来避免这个问题。

.fixedName {
    position: fixed;
    width: 100%;
    top: 10px;
    margin: 0;
    text-align: center;
    pointer-events: none;

}

以下链接中提供了更新的代码笔

http://codepen.io/anon/pen/ZGwppZ

Answer 4

只需在你的 ul position:relative; z-index:1 中添加一些样式就可以了

Answer 5

问题在于 fixedName 的 z-index，它将 h1 放置在 nav 元素上，因此不会触发 nav 上的悬停事件。

一种可能的解决方案是禁用h1 元素上的鼠标事件，例如

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');
    };
  });

});

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;
  pointer-events: none;
}
.content {
  position: relative;
  width: 60%;
  margin: 0 auto;
  text-align: center;
  top: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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 dolor amet pork ball tip ribeye leberkas pork belly cupim hamburger, tri-tip pork loin meatball landjaeger turkey boudin jowl. Pork chop turkey tri-tip landjaeger shankle filet mignon meatball bresaola ham meatloaf drumstick pastrami strip steak sausage doner. Pancetta turducken short ribs beef sirloin. Doner beef ribs tenderloin, boudin andouille turducken ball tip capicola pork loin short ribs kielbasa shoulder.</p>

  <p>Salami turkey biltong prosciutto cupim sirloin filet mignon frankfurter. Pig cow venison, tongue corned beef ribeye ground round turkey picanha. Hamburger rump meatball, pig ball tip doner corned beef. Beef ribs frankfurter biltong tongue brisket leberkas. Salami prosciutto shoulder jowl brisket, hamburger picanha short ribs doner ball tip andouille sirloin shank tongue pancetta.</p>

  <p>Meatball pork ball tip swine filet mignon frankfurter. Bacon landjaeger boudin, beef ground round picanha swine bresaola capicola biltong spare ribs meatloaf shankle. Tail shankle boudin landjaeger rump. Kielbasa leberkas corned beef, andouille cupim strip steak pork kevin chicken short loin pancetta.</p>

  <p>Bresaola tail ham hock tongue beef capicola. Biltong bacon shankle pork loin. Beef ribs pig andouille turducken t-bone, pork pancetta pastrami tenderloin swine shank capicola jerky sirloin. Filet mignon corned beef landjaeger, jerky tri-tip rump swine chuck. Pig flank landjaeger alcatra chuck ground round biltong tongue ribeye turducken. Tenderloin venison short ribs, tail picanha corned beef kielbasa doner. Landjaeger sirloin venison t-bone boudin.</p>

  <p>Andouille venison ball tip, filet mignon tenderloin ham hock bacon turducken. Turkey ham andouille landjaeger pig boudin. Beef leberkas pork loin short ribs strip steak. Ground round chicken kielbasa, ham hock ham fatback flank jerky biltong jowl pastrami beef ribs sirloin cupim spare ribs. Prosciutto shoulder beef ribs capicola porchetta beef. Turducken frankfurter turkey kevin doner boudin alcatra, ground round biltong swine landjaeger. Fatback hamburger ball tip biltong boudin picanha.</p>
</div>  

Answer 6

问题是页面内容来自导航菜单，

解决方案，添加z-index 并将导航菜单保持在页面内容的顶部

nav {
    z-index: 1;
    height: 60px;
    position: fixed;
    width: 100%;
    top: 0px;
    background-color: #E6E6E6;
}