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

все. Я пытаюсь создать вертикально фиксированное навигационное меню, которое плавает в динамически позиционируемом 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;
}

scroll jquery global-variables window-resize
person olalaelaine    schedule 22.04.2011    source источник
comment
+1 хорошо организованный и подготовленный вопрос.   -  person austinbv    schedule 22.04.2011

Ответы (1)


arrow_upward
0
arrow_downward

Я до сих пор не совсем понимаю, почему мой оригинальный 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;
}

Второй обходной путь

Этот следующий обходной путь очень похож на оригинальный jquery. Разница в том, что я сделал ширину навигационного элемента div равной 100% и использовал его для содержания элемента меню, который был динамически расположен внутри. Таким образом, 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 не работал]

person olalaelaine    schedule 22.04.2011