粘性导航 - 固定 position 时宽度发生变化

Question

我有一个粘性导航，当它粘住时（ position: fixed ），宽度正在改变以将导航栏的右侧推离屏幕。

屏幕录制示例

一个代码沙盒示例

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

我在非粘性和粘性 styles 中尝试了几种不同的设置width: 100%或width: 100vw 100vw。

在视频中，您可以看到导航变得“粘滞”时发生的 2 件事。 边界半径右下角正在消失，导航的内容被推到右边。 不粘时，导航的宽度为 808 像素，粘时它会增长到 840 像素。 需要明确的是，我并不是说边框半径样式正在被删除，而是边框现在不在屏幕上。

导航的代码：

const Wrapper = styled.div`
  padding: 1rem;
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
  background-color: white;
  color: black;
  /* width: auto; */
  /* width: 100%; */
  z-index: 1;
  margin: 0;
  box-shadow: 0px 2px 10px #273136;
  height: 30px;
  border-radius: 0 0 10px 10px;
  ${props => props.sticky && css`
    position: fixed;
    top: 0;
    width: 100vw;
  `}
`;

这是在另一个包装器组件中呈现的，包装整个应用程序，使用以下 styles：

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

Answer 1

您将widht:100vw设置为比主体更宽的固定元素，因为vw不关心滚动条，这将很难使用，我建议您使用width:100%

此外，因为您将box-sizing设置为content-box ，所以填充和边框不会被视为内容，因此它们会影响宽度，我们不要忘记正文上的默认margin:8px

为了适应这一切，我们可以使用calc()

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

解决方案

设置后position:fixed

您还添加

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来处理的吗？

是的，我们做到了，通过推动它，我们只是将它添加到另一端。