Html Bootstrap 4、导航栏固定顶和其他粘顶元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49984241/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4, navbar fixed-top and other sticky-top elements
提问by Zim
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.
显然，当我向下滚动页面时，我需要看到侧边栏，将主体的 padding-top 用于固定顶部导航栏。
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>
回答by Zim
Bootstrap sticky-tophas no offset for the Navbar since it sets top:0. You can add a custom class to account for the Navbar height.
Bootstrapsticky-top没有导航栏的偏移量，因为它设置了top:0. 您可以添加自定义类来说明导航栏高度。
.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
回答by dcsilver
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. Additionally, there's no need to add the custom class to the div.
这也在 Safari 中修复了它。此外，无需将自定义类添加到 div。
