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

【问题标题】：Sticky side bar component won't stick to the top - React + SCSS粘性侧栏组件不会粘在顶部 - React + SCSS
【发布时间】：2021-10-02 18:55:56
【问题描述】：

我在我的 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;

        //...
}

但是当我的页面的主要内容超出窗口视图高度并且我向下滚动时，导航栏不会粘住。我很困惑，因为我以前在其他项目上使用过这个设置，而且效果很好。我在这里错过了什么？

【问题讨论】：

如果您使用了隐藏在任何父组件中的溢出，则粘滞将不起作用，请检查
啊哈，这就是解决办法。你知道的越多。谢谢！
很高兴为您提供帮助...

标签： html css reactjs sass jsx

【解决方案1】：

您可以设置一个具有以下代码 sn-p 的 css（或 scss）文件：

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

然后您可以将 fixed-top 属性附加到您的标签之一。执行此操作后，您可能需要为内容添加一些顶部填充或底部填充（有时会被覆盖），但无论如何，这是一个可行的解决方案！

【讨论】：