Bootstrap - 修复了正文中的侧边栏

Question

我正在构建一个反应网站并使用 Bootstrap 4。在内容正文中的一个页面上，我有一个两列布局。左侧是侧边栏，右侧是一长列内容。滚动时，我想将左侧边栏保持在顶部。

这里有一张图来说明：

我当前的代码有效，但是当向下滚动时，侧边栏固定/定位在中心而不是顶部。看起来它正在对齐，就好像标题仍在它上方一样。这是我当前的代码：

<div className="header-wrap">
    //Header Here
</div>

<div className="container">
    <div className="row">
        <div className="col-3 position-fixed" id="sticky-sidebar">
            //Sidebar here
        </div>
        <div className="col offset-3" id="main">
            //body here
        </div>
    </div>
</div>

<div className="footer-wrap">
    //Footer Here
</div>

我的目标是当你滚动时，标题离开屏幕（它已经这样做了）侧边栏被定位到顶部。

Answer 1

for example 试试代码

#sticky-sidebar{ position: sticky; top: 0;}

我要留下一些资源

https://www.w3schools.com/howto/howto_js_navbar_sticky.asp https://www.w3schools.com/howto/howto_css_image_sticky.asp