положение зафиксировано вертикально с горизонтальной анимацией

Question

Я хочу добиться эффекта, подобного следующему: Элемент положения зафиксирован вертикально, абсолютно горизонтально

Это можно увидеть, работая здесь: http://jsfiddle.net/thugsb/M2m58/

Однакокак и в этой скрипке, я хочу, чтобы родитель мог анимироваться по горизонтали, а фиксированный div перемещался вместе с ним по горизонтали (это исправлено так, что при прокрутке страницы вниз он остается на заданной высоте в окне браузера).Это хорошо работает в FF (4 / Mac), но не может двигаться в WebKit.

По какой-то причине, если вы вместо этого анимируете .positioner, .fixed не будет перемещаться, пока вы не осмотрите элемент.Затем он прыгает на место.Это почти как будто забывает обновить дисплей.

Есть идеи?Спасибо!

Answer 1

.sliding-nav-bar {
    min-height: 100%;
}

это позволяет горизонтальной части «перехода по умолчанию» продолжать работать, но отключает вертикальную часть анимации.

Answer 2

Альтернативный подход:

Установка абсолютного положения во время воспроизведения анимации и восстановление его после завершения.Установка свойства top, чтобы убедиться, что элемент остается на месте во время анимации.

var offset = $('#drawerHandle').offset();

$('#drawerHandle').css({position: "absolute", top, offset.top).animate({'width':'40px'}, function () {
    $(this).css({position: "fixed", top: 0});        
});

Слово предупреждения, если у вас есть другой код (например, портаменто), также изменяющий свойство позиции элемента:

Возможно, вы захотите вместо этого установить position: absolute с помощью класса css, чтобы не перезаписывать то, что в этой библиотеке задано как position.(В случае портаменто это не всегда позиция: фиксированная).

Answer 3

Полагаю, вы хотите, чтобы и синий, и красный прямоугольники двигались влево.

Попробуйте анимировать их обоих:

$('.inflow').delay(1000).animate({'right':'200px'});
$('.fixed').delay(1000).animate({'right':'200px'});

Answer 4

Очевидно, что это ошибка webkit в том, что она не обновляет фиксированные элементы, если они не изменены напрямую (даже если они должны). Я добавил функцию обратного вызова в .animate({'width':'40px'}, function() {$('#drawerHandle').fadeOut(1, function() {$('#drawerHandle').show();});});, и это помогло.

Answer 5

изменить положение div.fixed на:

position: absolute; 

см. Скрипку: http://jsfiddle.net/maniator/M2m58/1/