jQuery scope confusion
<p>I am using the following jQuery code to find the position of the active link on my top menu navigation:</p>

<pre><code>$(document).ready(){
    // Handles the triangle image sprite for the top navigation
$('#topnav a')
    .on({ 

        mouseenter: function() {

            var pos = $("#topnav a.active-top").offset();
            console.log("Top: " + pos.top + " Left: " + pos.left );

            // Get the position of the current hovered "a" element
            var upSprite = $("#upArrow").show(),
                pos = $(this).offset(),
                aWidth = $(this).width(),
                offsetTop = 27, // Adjust this to raise or lower the sprite
                offsetLeft = aWidth / 2; // Centers the element under the link


            upSprite
                .css({
                    "top": pos.top + offsetTop,
                    "left": pos.left + offsetLeft
                });

            //console.log("Top: " + pos.top + " Left: " + pos.left);

        },

        mouseleave: function() {
            // Hide the arrow once the mouse leaves
            $('#upArrow').hide();
        }

    });
}
</code></pre>

<p>Now when I paste the exact same code outside of this event handler</p>

<pre><code> $(document).ready(function () {        
     var pos = $("#topnav a.active-top").offset();
     console.log("Top: " + pos.top + " Left: " + pos.left );
}
</code></pre>

<p>I get a complete different value for my pos.left. </p>

<p>As I understand .offset() should give me the position relative the document and unlike .position() which gives me the position relative to the parent container. </p>

<p>Is the code being fed a different type of context when it's in the scope of the .on() event handler? I have tried using $.proxy() to no avail. Any tips are appreciated. Thanks. </p>
