Событие изменения размера окна Jquery и пересчет глобальных переменных

Question

все. Я пытаюсь создать вертикально фиксированное навигационное меню, которое всплывает в динамически расположенном div. Я хочу, чтобы div прокручивался горизонтально, чтобы он не перекрывал содержимое страницы, но чтобы он был зафиксирован по вертикали, чтобы он всегда был виден. Я все еще не могу справиться с jquery, и хотя я очень горжусь тем, чего мне удалось достичь с помощью моих ограниченных знаний, я наткнулся на небольшую часть кода, которую я пытаюсь реализовать.

Я создал 4 функции. Тот, который определяет положение навигационного div (getVar), тот, который принимает текущую позицию div и манипулирует CSS, чтобы позволить ему прокручиваться горизонтально с содержимым страницы (scrollWith), тот, который вызывает вторую функцию, когда окно scrolled (scrollStart) и, наконец, функция, которая переопределяет позицию div при изменении размера окна.

Положение div рассчитывается правильно под нагрузкой. Он будет даже правильно пересчитан после изменения размера окна, но только если окно НЕ было прокручено. После прокрутки окна кажется, что обновленная переменная позиции не передается в функцию, которая вычисляет позицию CSS.

Я пытался создать это, когда было только две функции: одна для загрузки и одна для изменения размера окна. Эти две функции были практически идентичны, но не работали так, как я надеялся. Я также пытался создать функцию scrollStop, которая бы отменяла привязку события прокрутки при изменении размера окна и вызывала функцию scrollStart после того, как переменные были пересчитаны, но казалось, что переменные не обновлялись так, как я надеялся. Может быть гораздо более простой способ добиться эффекта, которого я добиваюсь, и любой вклад очень важен.

Я тоже создал для этого скрипку. http://jsfiddle.net/ED3gD/

Вот мой 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);
}

Вот мой HTML

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

Вот мой 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;
}

Answer 1

Я до сих пор не до конца понимаю, почему мой оригинальный jquery не работает, и хотел бы, чтобы кто-то дал объяснение или указал мне на некоторые хорошие ресурсы.Тем временем я нашел два способа обойти эту проблему, которая, я думаю, может быть полезна кому-то в будущем.

1-я работа вокруг

Первая работа заключается в том, чтобы div был относительно позиционирован и использует значение scrollTop для манипулирования значением CSS верхней позиции div дляимитирует фиксированную позицию.Я не особенно любил этот метод, поскольку навигационное меню перемещалось очень резким образом при прокрутке.

Вот мой jquery

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

Вот мой HTML

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

Вот мой 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;
}

2-я работа вокруг

Эта следующая работа очень похожа на оригинальный jquery.Разница в том, что я сделал навигационную ширину div на 100% и использовал ее для размещения меню div, которое было динамически расположено внутри.Таким образом, jquery вообще не нужно вычислять навигационное положение div, и это позволяет мне полностью обойти проблему с переменной position все вместе.

Вот мой jquery

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

Вот мой HTML

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

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

Вот мой 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;
}

[Примечание: на момент публикации этого ответа jsfiddle.net был недоступен]