在 ReactJS 中滚动然后修复 css 网格列

Question

我在 ReactJS 中有以下 CSS Grid 结构，其中我连续三列。

<div class="Container">
                <div class="Layout">
                    <Leftside />
                    <Main />
                    <Rightside />
                </div>
                
            </div>

container和Layout的样式如下：

.Container{
    padding-top: 50px;
    max-width: 100%;
}

.Layout{
    display: grid;
    grid-template-columns: minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);
    margin: 10px 0;
    grid-gap: 20px;
}

我在浏览器上有以下结构：

我想要的是第 3 列（添加到您的提要）随着页面滚动一段时间（此列和导航栏之间有 50 像素的间隙）直到它到达顶部，然后它应该保持固定那里。我将以下样式应用于右侧列：

function Rightside=(props)=>{
return(
<Container>
  //Other code
   </Container>);
}

const Container = styled.div`
  position: fixed;
  top: 50px;
  right: 0;
`;

但发生的情况是，即使页面滚动后，它与顶部仍保持 50px 的间隙，这是我不想要的。

请帮助我编写正确的 css 以实现正确的渲染。 谢谢！

Answer 1

发生这种情况是因为您在 Container 组件上提供了 top: 50px;。

这告诉第 3 列，Container 的最高点只能在 50px 处，仅此而已。

function Rightside=(props)=>{
    return(
        <Container>
        //Other code
        </Container>
    );
}

const Container = styled.div`
    position: sticky;
    top: 0px;
    right: 0;
`;