Jquery window resize event and the recalculating of global variables

all. I'm trying to create a vertically fixed navigational menu that is floated in a dynamically positioned div. I want the div to scroll horizontally so that it does not overlap the content on the page, but to be fixed vertically so that it is always visible. I'm still getting my feet wet with jquery and although I'm quite proud of what I was able to accomplish with my limited knowledge, I've hit a snag with the bit of code I'm trying to implement.

I've created 4 functions. One that defines the position of the navigational div (getVar), one that takes that current position of the div and manipulates the CSS to allow it to scroll horizontally with the page content(scrollWith), one that calls the second function when the window is scrolled(scrollStart), and lastly a function that redefines the position of the div when the window is resized.

The div's position is calculated correctly on load. It will even be correctly recalculated after the window has been resized, but only if the window开发者_JAVA技巧 has NOT been scrolled. Once the window has been scrolled it seems that the updated position variable is not passed on to the function that calculates the CSS position.

I have tried creating this where there were only two functions one for on load and one for after the window was resized. These two functions were virtually identical, but did not work the way I had hoped. I've also tried to create a scrollStop function that would unbind the scroll event when the window was resized and call the scrollStart function after the variables were recalculated, but it seemed that the variables were not refreshed the way I had hoped. There may be a far simpler way to achieve the effect I'm after, and any input is greatly appreciated.

I've created a fiddle for this as well. http://jsfiddle.net/ED3gD/

Here is my jquery

$(document).ready(function() {
    getVar();
    scrollStart();
});

$(window).resize((function() {
    var timeout = null;
    return function() {
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(getVar, 250);
    };
})());

function getVar() {
    var p = $(".navigation");
    position = p.offset();
}

function scrollWith() {
    $win = $(window);
    $('.navigation').css('left', position.left - $win.scrollLeft());
}

function scrollStart() {
    $(window).scroll(scrollWith);
}

Here is my HTML

<div class="wrapper">
    <div class="navigation">
        <div class="menu">
            navigation
        </div>
    </div>
    <div class="content">content</div>
    wrapper
</div>

Here is my CSS

.wrapper {
    position:relative;
    margin:0 auto;
    background-color:red;
    width:200px;
}

.navigation {
    float: left;
    position:fixed;
    width:100px;
    background-color:yellow;
}


.content {
    position:absolute;
    left:100px;
    top:0px;
    margin:0;
    padding:0;
    width:100px;
    height:1400px;
    background-color:blue;
}

I still do not completely understand why my original jquery does not work and would love to have someone provide an explanation or point me to some good resources. In the meantime I have found two ways to work around this issue that I thought perhaps may be helpful to someone in the future.

1st Work Around

The first work around involves having the div relatively positioned and relies on the scrollTop value to manipulate the CSS top position value of the div so that it mimics having a fixed position. I was not particularly fond of this method as the navigational menu moved in a very jerky manner while scrolling.

Here is my jquery

 $(document).ready (function() {
    $(window).scroll(function(){
    $('.navigation').css('top',0+ $(window).scrollTop());
      });
      });

Here is my HTML

<div class="wrapper">
            <div class="navigation">
             navigation
            </div>
            <div class="content">
             content
            </div>
 wrapper
</div>

Here is my CSS

.wrapper {
    position:relative;
    margin:0 auto;
    background-color:red;
    width:200px;
}

.navigation {
    float:left;
    position:relative;
    width:100px;
    background-color:yellow;
}    

.content {
    position:absolute;
    left:100px;
    top:0px;
    width:100px;
    height:1400px;
    background-color:blue;
}

2nd Work Around

This next work around is very similar to the original jquery. The difference is that I've made the navigational div width 100% and used it to contain the menu div which has been dynamically positioned inside. This way the jquery does not need to calculate the navigational div position at all and that allows me to completely sidestep the issue with the position variable all together.

Here is my jquery

$(document).ready (function() {
$(window).scroll(function(){
$('.navigation').css('left', 0 - $(window).scrollLeft());
  });
  });

Here is my HTML

<div class="navigation"> 
          <div class="menu">
           menu
        </div>
            navigation
    </div>

    <div class="wrapper">
        <div class="content">content</div>
    wrapper
</div>

Here is my CSS

.wrapper {
    position:relative;
    margin:0 auto;
    background-color:red;
    width:200px;
}

.navigation {
    position: fixed;
    width:100%;
    min-width:200px; 
    background-color:transparent;
}    

.menu {
    position: relative;
    width:100px;
    margin:0 auto; 
    left: -50px;
    z-index: 10;
    background-color:yellow;
}

.content {
    position:absolute;
    left:100px;
    top:0px;
    width:100px;
    height:1400px;
    background-color:blue;
}

[Note: At the posting of this answer jsfiddle.net was down]