Javascript 使用jQuery将宽度从100%更改为自动时css转换不起作用

我在页面底部有一个条，当我滚动页面时，我希望它能像内容所需的那样宽，并固定在底部

像这样：

但当它碰到页脚时，我希望它能滑出，覆盖整个页面宽度。像这样：

我已经解决了所有的问题，除了如何使它很好地扩展。现在，当滚动条到达页面的正确位置以进行加宽时，发生了一个js事件。然后我发射这个：

$('#bar').css('width' : '100%');

$('#bar').css('width' : 'auto');

当我从它向上滚动并希望该条再次变小时，我触发以下命令：

$('#bar').css('width' : '100%');

$('#bar').css('width' : 'auto');

在我的css中，我有以下内容：

-webkit-transition: width 1s; /* Safari */
transition: width 1s;

现在，除了过渡效果之外，它都可以工作。酒吧很快就变成了另一个大小。为什么过渡不起作用

编辑：我使用此选项解决页脚栏停止问题：

---

您无法转换到自动您需要使用值，因此您可以尝试类似的操作。指定元素的宽度，然后将其更改为具有100%宽度的父容器的宽度：

var w=$（'.bar'）.width（）；
$（'.bar'）.css（'width'，w）；
$（“.bar”）。在（'click'，function（）上{
$（'.bar'）.css（'width'，$（'body'）.outerWidth（））；
})
$（“.reduce”）。在（'click'，function（）上{
$（'.bar'）.css（'width'，w）；
})

正文{
文本对齐：居中；
}
.酒吧{
框大小：边框框；
填充：20px；
背景：红色；
显示：内联块；
过渡：宽度1s；
}

单击展开
单击以减少

您无法转换到自动您需要使用值，因此您可以尝试类似的操作。指定元素的宽度，然后将其更改为具有100%宽度的父容器的宽度：

var w=$（'.bar'）.width（）；
$（'.bar'）.css（'width'，w）；
$（“.bar”）。在（'click'，function（）上{
$（'.bar'）.css（'width'，$（'body'）.outerWidth（））；
})
$（“.reduce”）。在（'click'，function（）上{
$（'.bar'）.css（'width'，w）；
})

正文{
文本对齐：居中；
}
.酒吧{
框大小：边框框；
填充：20px；
背景：红色；
显示：内联块；
过渡：宽度1s；
}

单击展开
单击以减少

可能的重复，您可以使用绝对定位的伪元素作为背景，其左/右基数坐标在用户滚动时更新。但是，为了制定这个解决方案，您必须以MCVE.lol的形式共享某种代码/标记。只需将其更改为####px，现在就可以工作了。tnxPossible duplicate of您可以使用绝对定位的伪元素作为背景，当用户滚动时，其左/右基数坐标会更新。但是，为了制定这个解决方案，您必须以MCVE.lol的形式共享某种代码/标记。只需将其更改为####px，现在就可以工作了。tnx