垂直固定位置，水平动画

Question

我想要实现类似这个的效果：垂直固定元素，水平绝对定位 可以在这里看到它的效果: http://jsfiddle.net/thugsb/M2m58/ 然而，就像那个fiddle一样，我希望父容器能够在水平方向上被动画化，而固定的div跟着它一起水平移动（它是固定的，所以当您向下滚动页面时，它会保持在浏览器窗口的一个固定高度）。这在FF（4/mac）中运行良好，但在Webkit中无法移动。

出于某种原因，如果您将.positioner动画化，.fixed不会移动，直到您检查该元素为止。然后它才跳到正确的位置。这似乎是忘记更新显示的问题。

有什么想法吗？谢谢！

- thugsb

---

我的解决方案的示例可以在这里看到：http://www.slc.edu/undergraduate/humanities/index.html - thugsb

Answer 1

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

这样可以让“默认转换”的水平部分继续工作，但禁用了动画的垂直部分。

- Ingrid

Answer 2

将div.fixed的位置改为:

position: absolute; 

请查看 JSFiddle：http://jsfiddle.net/maniator/M2m58/1/

- Naftali

---

不对。这意味着当您滚动时，它不再向下滚动页面（这是期望的效果）。 - thugsb

Answer 3

我猜你想让蓝色框和红色框都向左移动。

尝试同时对它们进行动画处理：

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

- Diodeus - James MacFarlane

---

不行。这会使固定元素距离屏幕右侧200像素。 - thugsb

Answer 4

另一种方法：

在动画播放时设置绝对位置，并在完成后将其设置回来。通过设置顶部属性来确保元素在动画过程中保持在原位。

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

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

如果你有其他改变元素位置属性的代码（例如端口amento），那么需要注意一点：

你可能希望通过CSS类设置position: absolute，而不是覆盖库中设置为position的属性。 （在portamento的情况下，它并不总是position：fixed）。

- jhsveli

---

我认为如果用户在动画播放时滚动，这种方法可能行不通 - 它会在再次固定位置时跳跃。不过这是个好主意，如果我不那么挑剔的话，它应该是可行的。 :) - thugsb

你的 JavaScript 代码无效，括号搞错了。 - Christoph

Answer 5

显然这是一个webkit的bug，如果固定元素没有直接更改，它就不会更新（尽管它应该）。我在.animate({'width':'40px'}, function() {$('#drawerHandle').fadeOut(1, function() {$('#drawerHandle').show();});});中添加了一个回调函数，问题得到解决。

- thugsb