[英]Bootstrap 4, navbar fixed-top and other sticky-top elements
Here the reproduction: https://jsbin.com/lawafu/edit?html,output 这里的复制: https : //jsbin.com/lawafu/edit?html,output
Is this a bug? 这是一个错误吗? A mistake?
错误? A problem?
一个问题? An unrealizable idea?
一个不可实现的想法?
Before scroll: 滚动前:
After scroll: 滚动后:
What I need : 我需要什么 :
Obviously I need to see the sidebar when I scroll down the page, using padding-top of the body for the fixed-top navbar. 显然,当我向下滚动页面时,我需要看到侧边栏,使用固定顶部导航栏的主体填充顶部。
I'm using this code for the sidebar: 我正在使用此代码作为侧边栏:
<div class="sticky-top">
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Bootstrap sticky-top
has no offset for the Navbar since it sets top:0
. Bootstrap
sticky-top
没有Navbar的偏移量,因为它设置为top:0
。 You can add a custom class to account for the Navbar height. 您可以添加自定义类来考虑Navbar高度。
.sticky-offset {
top: 56px;
}
<div class="sticky-top sticky-offset">
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Demo: https://www.codeply.com/go/QeJOvbYswd 演示: https : //www.codeply.com/go/QeJOvbYswd
Related: Bootstrap 4 fixed top nav and fixed sidebar 相关: Bootstrap 4固定顶部导航和固定侧边栏
Zim's answer was helpful, but did not work for me in Safari 12.0.1 on MacOS (Chrome 70 was fine, worked as expected). Zim的回答很有帮助,但在MacOS上的Safari 12.0.1中对我不起作用(Chrome 70很好,按预期工作)。
I think this is because sticky-top has a top:0px value which was taking priority over the custom class added. 我认为这是因为sticky-top有一个top:0px值,它优先于添加的自定义类。
So instead I simply added: 所以我只是添加:
.sticky-top{
top:56px;
}
Which fixed it in Safari too. 这也修复了它在Safari中。 Additionally, there's no need to add the custom class to the div.
此外,无需将自定义类添加到div。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.