首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Bootstrap - body中的固定边栏

Bootstrap - body中的固定边栏
EN

Stack Overflow用户
提问于 2021-01-16 05:53:49
回答 1查看 250关注 0票数 0

我正在构建一个react网站,并使用Bootstrap 4。在我的一个页面的内容主体中,我有一个两列的布局。左边是一个侧边栏,右边是一个长长的内容栏。当滚动时,我想保持左侧边栏在顶部。

这里有一张图片来说明:

我当前的代码工作正常,但是当向下滚动侧边栏时,固定/定位在中心而不是顶部。它看起来像是在对齐,就好像标题仍然在它上面一样。下面是我当前的代码:

代码语言:javascript
运行
复制
<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>

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

EN

回答 1

Stack Overflow用户

发布于 2021-01-16 06:43:34

for example尝试代码

代码语言:javascript
运行
复制
#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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65744035

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档