小屏幕滚动时导航栏（navbar）向右偏移问题求助

嘿，刚接触Web开发遇到这种细节问题太正常啦，我来帮你搞定它～

你遇到的核心问题是：当导航栏被添加sticky类切换为粘性定位后，它的宽度没有正确适配窗口尺寸，导致右浮动元素滑出了可视区域。

问题根源 #

当元素设置为position: fixed或position: sticky时，它会脱离正常的文档流，默认宽度会收缩到自身内容的宽度，而不是继承父容器的宽度。这就导致窗口缩小后，导航栏实际宽度不足以容纳所有元素，右浮动的内容自然就跑出去了。

具体解决方案 #

你只需要调整.sticky类的CSS样式，确保粘性导航栏能始终占满窗口宽度，同时处理好内边距、边框的溢出问题：

1. 给.sticky类补充以下样式：

.sticky {
  position: fixed;
  top: 0;
  /* 强制导航栏贴紧窗口左右边缘 */
  left: 0;
  right: 0;
  /* 确保宽度与窗口一致 */
  width: 100%;
  /* 让内边距、边框包含在宽度范围内，避免溢出 */
  box-sizing: border-box;
}

2. 额外检查：如果你的导航栏原始样式设置了固定宽度（比如width: 1200px这类固定值），建议改成max-width: 1200px，这样在小窗口下导航栏能自动收缩适配。

原理说明 #

• left: 0 + right: 0会强制导航栏左右贴紧窗口边缘，配合width: 100%保证它的宽度和当前窗口完全一致。
• box-sizing: border-box让元素的内边距和边框都计算在width设置的范围内，不会因为这些额外样式导致总宽度超过100%，避免出现横向滚动条或者元素溢出的情况。

这样调整后，不管窗口怎么缩小，滚动时导航栏都能完整贴合窗口，右浮动元素也不会滑出去啦～

内容的提问来源于stack exchange，提问作者Mxngls