[jQuery影响其他元素后，禁用CSS悬停效果

问题描述 投票：0回答：6

我设置了jQuery滚动功能，以使标头元素变粘并固定在页面顶部。这部分工作正常。但是，一旦固定，导航链接将不再注册悬停效果。我为此抓狂，因为jQuery事件根本不会影响nav部分。我以为是fl幸或错字，但在此处重新创建基本版本却遇到了同样的问题：

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

});
jquery css hover sticky
6个回答
0
投票

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

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

}

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

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

1
投票

您需要将z-index设置为999

0
投票

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

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

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

问题是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>
0
投票

只需向您的ul position:relative; z-index:1添加一些样式，一切就可以了

0
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.