Position vertikal fixiert mit horizontaler Animation

Question

Ich möchte einen ähnlichen Effekt wie diesen erzielen: Element vertikal fest, horizontal absolut positionieren

Wie das funktioniert, sehen Sie hier: http://jsfiddle.net/thugsb/M2m58/

Jedoch, wie in diesem fiddle, möchte ich die übergeordnete in der Lage sein, horizontal animiert werden, und die feste div horizontal mit ihm zu bewegen (es ist fest, so dass, wenn Sie die Seite nach unten scrollen es auf eine bestimmte Höhe im Browserfenster bleibt). Dies funktioniert gut in FF (4/Mac), aber es schlägt fehl, in Webkit zu bewegen.

Wenn Sie stattdessen den .positioner animieren, bewegt sich der .fixed aus irgendeinem Grund nicht, bis Sie das Element überprüfen. Dann springt es an seinen Platz. Es ist fast so, als ob es vergessen würde, die Anzeige zu aktualisieren.

Irgendwelche Ideen? Danke!

Answer 1

Ändern Sie die Position des div.fixed in:

position: absolute; 

siehe Fiedel: http://jsfiddle.net/maniator/M2m58/1/

Answer 2

Ich nehme an, Sie wollen, dass sich sowohl das blaue als auch das rote Feld nach links bewegen.

Versuchen Sie, sie beide zu animieren:

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

Answer 3

Offenbar handelt es sich um einen Webkit-Bug, der feste Elemente nicht aktualisiert, wenn sie nicht direkt geändert werden (obwohl sie das sollten). Ich habe eine Callback-Funktion in die .animate({'width':'40px'}, function() {$('#drawerHandle').fadeOut(1, function() {$('#drawerHandle').show();});}); und das hat den Zweck erfüllt.

Answer 4

Ein alternativer Ansatz:

Setzen der absoluten Position, während die Animation abgespielt wird, und Zurücksetzen, wenn sie abgeschlossen ist. Einstellung der Eigenschaft top, um sicherzustellen, dass das Element während der Animation an seinem Platz bleibt.

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

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

Ein Wort der Warnung, wenn Sie anderen Code (z.B. Portamento) haben, der auch die Positionseigenschaft des Elements ändert:

Sie könnten stattdessen position: absolute über eine css-Klasse setzen, um nicht zu überschreiben, was diese Bibliothek als Position gesetzt hatte. (Im Fall von portamento ist es nicht immer position: fixed).

Answer 5

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

Dies ermöglicht, dass der horizontale Teil des "Standardübergangs" weiterhin funktioniert, aber der vertikale Teil der Animation wird deaktiviert.