Question

我希望达到与此类似的效果：Position element fixed vertically, absolute horizontally

这可以在这里工作：http://jsfiddle.net/thugsb/M2m58/

然而，就像那个小提琴一样，我希望父级能够水平动画，并且固定的div可以与它水平移动（它是固定的，这样当你向下滚动页面时它保持在一个设定的高度浏览器窗口）。这在FF（4 / mac）中工作正常，但它无法在webkit中移动。

出于某种原因，如果您为.positioner设置动画，则.fixed在您检查元素之前不会移动。然后它跳到原位。这几乎就像忘记更新显示一样。

有什么想法吗？谢谢！

Answer 1

将div.fixed位置更改为：

position: absolute;

请参阅小提琴：http://jsfiddle.net/maniator/M2m58/1/

Answer 2

我假设您希望蓝框和红框都向左移动。

尝试为它们制作动画：

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

Answer 3

显然这是一个webkit错误，因为它不会更新固定元素，如果它们没有直接更改（即使它们应该）。我向.animate({'width':'40px'}, function() {$('#drawerHandle').fadeOut(1, function() {$('#drawerHandle').show();});});添加了一个回调函数，这就是诀窍。

Answer 4

另一种方法：

在播放动画时设置绝对位置，并在完成时将其设置回来。设置top属性以确保元素在动画时保持原位。

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

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

如果你有其他代码（例如portamento）改变元素的位置属性，请注意警告：

您可能希望通过css类设置position：absolute，以便不覆盖该库设置为position的内容。（在滑音的情况下，并不总是位置：固定）。

Answer 5

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

这允许＆＃39;默认转换的水平部分＆＃39;继续工作，但禁用动画的垂直部分。

位置与水平动画垂直固定

5 个答案: