Title text placement off after scroll

Question

My problem is that after scrolling in the #leftnav the #leftnavHover does not position itself according to the new top css value. I need the #leftnavHover div to follow in the same way the native title text for the browser does.

Here's a fiddle http://jsfiddle.net/fauverism/b4rwb/6/

Here's a step by step of what I'm describing...

• Visit the link and hover over Sabers in the nav
• Scroll inside the nav div
• Hover over Sabers again and you'll notice that the placement of the Sabers text inside of the #leftnavHover is in the same place. The div placement does not insert the new topAfterScroll array. The array is only present once and it then gets removed with the original value.

Here are some details...

• I can't seem to store the array that is retrieved after the scroll from topAfterScroll into a new var
• This only has to work in Chrome :)

Yes I know that this does seem strange to do since browsers handle this functionality just fine. It's a Chromium issue.

Answer 1

Just subtract the scrolled pixels using jQuerys scrollTop (API) on #leftnav like this:

$('#leftnavHover').text(this.title).css('top', this.offsetTop - $('#leftnav').scrollTop()); 

http://jsfiddle.net/b4rwb/7/