粘性侧边栏组件不会粘在顶部 - React + SCSS

Question

我有一个导航栏组件编码在我的React应用程序的JSX与column-left类:

<animated.div className="column-left" style={anim}>
<div className="top">
<img src={logo} alt="quicknote" style={{ height: "200px" }}/>
<h1>Hello, {user.firstName}</h1>
<button id="new-note"><span>+</span> New Note</button>
</div>
<div className="bottom">
<button onClick={() => setAcctSettingsVis(true)}>Account Settings</button>
<button onClick={handleClick}>Log Out</button>
</div>
</animated.div>

然后，我的目标是在我的SCSS类名称的元素，并应用position: sticky属性以及0的top位置告诉它在哪里粘:

.column-left {
position: -webkit-sticky;
position: sticky;
top: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100vh;
min-width: 20rem;
//...
}

但是，当我的页面的主要内容延伸超过窗口视图的高度，我向下滚动，导航条不粘。我很困惑，因为我以前在其他项目上使用过这个设置，它工作得很好。我遗漏了什么?

Answer 1

您可以设置一个css(或scss)文件，其中包含以下代码片段:

.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}

然后可以附加固定顶部属性设置为其中一个标签。一旦你这样做了，你可能不得不添加一些顶部填充或底部填充到你的内容(有时它会被覆盖)，但尽管如此，这是一个解决方案，应该工作!