Css hover effect disabled after jQuery affecting different element

Question

I set up a jQuery scroll function to make an header element sticky and become fixed at the top of the page. This part is working smoothly. However, once it becomes fixed, the navigation links are no longer registering a hover effect. I'm scratching my head on this because the jQuery event shouldn't affect the nav section at all. I thought it was a fluke or a typo, but re-creating a basic version here gave the same issue:

CodePen

Try hovering over the 3 links in the upper left corner, they get bold. But then when you scroll down til "Title" sticks, and try again - nothing. Can anyone steer me in the right direction? Thanks!

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

you need to set z-index to 999

Answer 2

set z-index to 999 and the issue will be fixed

Answer 3

You can add pointer-event to the avoid this issue.

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

}

Updated codepen available in the following link

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

Answer 4

just add some style to your ul position:relative; z-index:1 and everything is ok

Answer 5

The problem is the z-index of fixedName, which places the h1 over the nav element so the hover event on the nav will not get triggered.

One possible solution is to disable the mouse events on the h1 element like

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

The problem is that page content comes over the nav menu,

solution, add z-index and keep the nav menu on top of page-content

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