即使在滚动时，使用导航栏固定顶部并将其下方的容器固定在其底部？答案

【问题标题】：Using Navbar fixed-top and keeping container below it fixed to its bottom even upon scrolling?即使在滚动时，使用导航栏固定顶部并将其下方的容器固定在其底部？
【发布时间】：2019-12-10 02:35:57
【问题描述】：

我正在使用 Bootstrap 中的“navbar fixed-top”。在它下面我有一个容器。我注意到每当我向下滚动页面时，导航栏下方的容器开始滑到导航栏下方（请参阅附图）。我知道这是固定顶部的预期行为，但我想知道即使用户向下滚动，是否始终将导航栏下方的容器固定在其底部？

【问题讨论】：

你可以为元素添加一个 padding-top。

标签： html css bootstrap-4 navbar

【解决方案1】：

获取固定元素的高度，比如 50px，然后：

body {margin-top:50px}

【讨论】：

感谢您回复我，这解决了我在页面加载时遇到的问题。但是，当我开始向下滚动页面时，容器仍然会在导航栏下方滑动。
所以你想让你的容器在滚动时覆盖固定元素？也许你想在滚动开始时隐藏固定元素？
请参考新添加的图片，希望能说明我想要达到的效果。基本上，当我向下滚动时，我不希望容器从窗口的最顶部开始消失，而是从导航栏的底线消失。
为此，您需要一些 jquery。如果不想用js的话，把上面的固定位置去掉，就可以正常滚动了。

【解决方案2】：

请将标题高度添加为容器的顶部边距..例如..

css

.container {
 margin-top:100px; /*height of the header*/
}

或

JQUERY

var headerheight = jQuery('header').outerHeight();
jQuery('header').css("margin-top",headerheight);

【讨论】：