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

Question

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

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

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

在视频中，当导航变为 "sticky" 时，您可以看到发生了 2 件事。 border-radius-bottom-right 正在消失，导航的内容被推到右边。不粘滞时，导航宽度为 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;
  `}
`;

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

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()

而不是 100vw 你应该使用 100% 因为 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来处理的吗？

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

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

sticky nav - width changing when position fixed

javascript

css

reactjs

styled-components