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

Question

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

CodePen

尝试将鼠标悬停在左上角的 3 个链接上，它们会变粗。但是当你向下滚动直到 "Title" 坚持，然后再试一次 - 没有。谁能引导我朝着正确的方向前进？谢谢！

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 并保持导航菜单位于页面内容的顶部

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

Answer 2

问题是 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 3

只需为您的 ul 添加一些样式 position:relative; z-index:1 一切正常

Answer 4

您可以添加指针事件来避免此问题。

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

}

更新后的 codepen 可在以下 link

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

Answer 5

将 z-index 设置为 999，问题将得到解决

Answer 6

您需要将 z-index 设置为 999

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

Css hover effect disabled after jQuery affecting different element

jquery

css

hover

sticky

HTML

CSS

Javascript