Question

我设置了一个jQuery滚动函数，使标题元素变得粘滞，并固定在页面顶部。这部分工作顺利。但是，一旦它被修复，导航链接就不再注册悬停效果。我抓住了这个问题，因为jQuery事件根本不会影响导航部分。我认为这是一个侥幸或错字，但在这里重新创建一个基本版本给出了同样的问题：

CodePen

尝试将鼠标悬停在左上角的3个链接上，它们会变为粗体。但是当你向下滚动直到＆＃34; Title＆＃34;坚持，再试一次 - 什么都没有。任何人都可以引导我朝着正确的方向前进吗？谢谢！

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并将导航菜单保留在页面内容

之上

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

Answer 3

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

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

Answer 5

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

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

}

更新了以下链接中的codepen

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

Answer 6

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

jQuery影响不同元素

HTML

CSS

的Javascript

6 个答案: