使用Navbar固定在顶部,并在滚动时将其下方的容器固定在其底部?

时间:2019-08-01 13:20:37

标签: html css bootstrap-4 navbar

enter image description here我正在使用Bootstrap中的“ navbar fixed-top”。在它下面,我有一个容器。我注意到的是,每当我向下滚动页面时,导航栏下方的容器就会开始在导航栏下方滑动(请参阅随附的照片)。我知道这是固定顶部的一种预期行为,但是我想知道是否有办法即使在用户向下滚动时也始终将导航栏下方的容器固定在其底部?

enter image description here

2 个答案:

答案 0 :(得分:0)

获取固定元素的高度,例如50px,然后:

body {margin-top:50px}

答案 1 :(得分:0)

例如,请将标头高度添加到容器的顶部边缘。

css

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

OR

JQUERY

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