StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<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 > 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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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