Javascript 当我将位置更改为“固定”时，为什么导航向左浮动？我如何解决这个问题并保持它的中心？

$（函数（）{
$（窗口）.on（'scroll'，function（）{
如果（$（窗口）.scrollTop（）>=$（'.SunCainer'）.height（））{
$（'.nav'）.addClass（'stick'）；
}否则{
$（'.nav'）.removeClass（'stick'）；
}
});
});
html，正文{
背景尺寸：封面；
背景附件：固定；
文本对齐：居中；
}
.棍子{
位置：固定；
}
#包装纸{
高度：3000px；
宽度：100%；
文本对齐：居中；
}
.导航{
宽度：90%；
高度：50px；
背景色：#FFB00F；
文本对齐：居中；
保证金：0自动；
}
.tab_支架{
宽度：1000px；
文本对齐：居中；
}
李{
宽度：120px；
高度：50px；
显示：内联块；
文本对齐：居中；
}
李：悬停{
背景色：#2F4F4F；
}
a{
文字装饰：无；
颜色：黑色；
}
伊姆奇先生{
边缘顶部：50px；
}
.Suncainer{
背景色：#187249；
宽度：100%；
高度：700px；
文本对齐：居中；
}
.内容{
背景色：浅色鲑鱼；
宽度：100%；
高度：700px；
}
.第三{
背景颜色：卡其色；
宽度：100%；
高度：700px；
}






东西会在这里
您正在使用
边距：0 auto
对中导航。但是当它被
.stick
类指定为
位置：fixed
时，这种居中方法将不再有效-它只适用于
位置：相对
元素

由于CSS中没有其他参数，因此作为一个固定元素，它只需放置在默认位置
left:0

您可以通过分配
left:50%来避免这种情况和
转换：translateX（-50%）到它


$（函数（）{
$（窗口）.on（'scroll'，function（）{
如果（$（窗口）.scrollTop（）>=$（'.SunCainer'）.height（））{
$（'.nav'）.addClass（'stick'）；
}否则{
$（'.nav'）.removeClass（'stick'）；
}
});
});
html，正文{
背景尺寸：封面；
背景附件：固定；
文本对齐：居中；
}
.棍子{
位置：固定；
左：50%；
转化：translatex（-50%）；
}
#包装纸{
高度：3000px；
宽度：100%；
文本对齐：居中；
}
.导航{
宽度：90%；
高度：50px；
背景色：#FFB00F；
文本对齐：居中；
保证金：0自动；
}
.tab_支架{
宽度：1000px；
文本对齐：居中；
}
李{
宽度：120px；
高度：50px；
显示：内联块；
文本对齐：居中；
}
李：悬停{
背景色：#2F4F4F；
}
a{
文字装饰：无；
颜色：黑色；
}
伊姆奇先生{
边缘顶部：50px；
}
.Suncainer{
背景色：#187249；
宽度：100%；
高度：700px；
文本对齐：居中；
}
.内容{
背景色：浅色鲑鱼；
宽度：100%；
高度：700px；
}
.第三{
背景颜色：卡其色；
宽度：100%；
高度：700px；
}






东西会在这里
带
位置：固定，您必须给出一个
顶部
、
左侧
、
右侧
或
底部
，才能将其放置在窗口中。只需将位置设置为左侧：50是否理想？还是说这太天真了？你是说50像素还是50%？50px将简单地创建一个固定的距离，这是可以的，但不居中（或者只有这样，如果窗口正好比导航宽100px）。只需将其
left:50%
即可将导航的左边框移动到窗口的中间，这肯定不是居中，而是太右了。这就是
transform:translateX（-50%）
的作用：它将导航向后移动其自身宽度的一半。