Javascript 粘性导航-位置固定时宽度变化

我有一个粘性导航，当它粘住时（

position:fixed

正在应用），宽度会发生变化，将导航条的右侧推出屏幕

使用react/hook和样式化组件。钩子正在应用sticky:true的属性（参见下面的代码）

我在非粘性和粘性样式中尝试了几种不同的设置组合

width:100%

或

width:100vw

在视频中，当导航变得“粘滞”时，您可以看到两种情况。右下角的边界半径正在消失，导航的内容被推到右侧。不粘性时，nav的宽度为808px，粘性时，nav的宽度为840px。要明确的是，我并不是说边界半径样式正在被删除，而是右边的边界现在已脱离屏幕

导航代码：

const Wrapper=styled.div`
填充：1rem；
显示器：flex；
证明内容：中心；
字体大小：1.5rem；
背景色：白色；
颜色：黑色；
/*宽度：自动*/
/*宽度：100%*/
z指数：1；
保证金：0；
盒影：0px 2px 10px#273136；
高度：30px；
边界半径：0 10px 10px；
${props=>props.sticky&&css`
位置：固定；
排名：0；
宽度：100vw；
`}
`;

这是在另一个包装器组件内呈现的，包装整个应用程序，具有以下样式：

text-align: center;
font-size: 10px; 
color: black;
display: flex;
flex-direction: column;
max-width: 100vw;

---

您将

widt:100vw

设置为比主体更宽的固定元素，因为

vw

不关心滚动条，因此很难使用滚动条，我建议您使用

width:100%

另外，由于已将

框大小设置为
内容框
，因此填充和边框不会被视为内容，因此它们会影响宽度，并且不要忘记主体上的默认
边距：8px

为了适应所有这些，我们可以使用
calc（）

您应该使用
100%
而不是
100vw
，因为100%为我们提供了不包括滚动条宽度的父对象的确切宽度

解决方案

设置
位置后：固定

您还可以添加

left:8px; // to push it 8px from the left because of the default margins on the body
width:calc(100% - 48px);

为什么
48x
？

left padding (16p) + right padding(16px) + left body margin(8px) + right body margin(8px) = 48px

为什么是左体边缘？我们不是用
left:8px
来处理它吗？

left padding (16p) + right padding(16px) + left body margin(8px) + right body margin(8px) = 48px

是的，我们这样做了，通过推它，我们只是将它添加到了另一端。
你能发布一个重现问题的工作代码片段吗？@ZohirSalak补充道