Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You weren't accounting for the scrolled status of the page, so the mouseenter/mouseleave events were, regardless of whether the page was scrolled, resetting the class-names without regard. Which, predictably, didn't gel with what you wanted.</p> <p>The obvious resolution to this is to use a global variable (albeit within the scope of the jQuery document-ready) to keep track of this and, then check that in the <code>hover()</code> functions, leading to the following:</p> <pre><code>var scrolled = false; $(window).scroll( function(){ var b = $(window).scrollTop(); if (b == 0) { $('#access').removeClass('scroll').addClass('normal'); scrolled = false; } else if (b &gt; 0) { $('#access').removeClass('normal').addClass('scroll'); scrolled = true; } }); $('#access').hover( function(){ if (scrolled) { // window scrolled, hence access class should be 'scroll' $('#access').removeClass('scroll').addClass('normal'); } }, function(){ if (scrolled) { // window scrolled, hence access class should be 'normal' (from mouseenter) $('#access').removeClass('normal').addClass('scroll'); } });​ </code></pre> <p><a href="http://jsfiddle.net/davidThomas/bJquD/2/" rel="nofollow">JS Fiddle demo</a>.</p> <p>The result of this is that if the page is un-scrolled the <code>mouseenter</code>/<code>mouseleave</code> events do nothing (because they shouldn't, the <code>normal</code> class-name is correct in this case), whereas if the page <em>is</em> scrolled, they remove the scroll class-name on <code>mouseenter</code> and restore it on <code>mouseleave</code>.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload