用户滚动时标题变为固定

Question

在一个网络应用程序中，我有一个标题，并希望在用户滚动时继续显示它，我使用position: fixed;来实现这一点但是身体现在从页面顶部开始而不是开始从标题下面。

最初：

现在：

我想要做的是当用户开始滚动或给它一个固定的位置时将标题设置为固定位置，但是根据标题的高度将该区域保留在标题下（我可以目前只是在那里添加一个固定高度的div，但如果标题改变意味着我也必须改变它，感觉就像是一个双倍的结果）

小提琴：https://jsfiddle.net/zmp7fbrx/3/

Answer 1

您可以将padding-top的{​​{1}}设置为标题的高度，并将body添加到标题的CSS中。

top: 0

body {
  padding-top: 50px;
}

.header{
  position: fixed;
  top: 0;
}
.header, .body, .footer {
    width:100%;
    height:200px;
    border:1px solid blue;
}

.header {height: 50px;}
.body {text-align:center;}
.footer {}

.center-horiz{width:200px;height:100px;border:1px solid #666;  display: inline-block;}

或者你可以给<div class="header">My menu</div> <div class="body">some text2 <br> <div class="center-horiz">div centered horizontally</div> </div> <div class="footer">some text3</div>一个.body标题的高度。

margin-top

.header{
  position: fixed;
  top: 0;
}
.header, .body, .footer {
    width:100%;
    height:200px;
    border:1px solid blue;
}

.header {height: 50px;}
.body {
  margin-top: 50px;
}
.body {text-align:center;}
.footer {}

.center-horiz{width:200px;height:100px;border:1px solid #666;  display: inline-block;}

使用JavaScript获取加载DOM的标题高度，并设置<div class="header">My menu</div> <div class="body">some text2 <br> <div class="center-horiz">div centered horizontally</div> </div> <div class="footer">some text3</div>元素的margin-top。 （这也适用于标题的动态高度）

.body

document.addEventListener('DOMContentLoaded', function(e) {
  var headerElement = document.querySelector('.header');
  var bodyElement = document.querySelector('.body');
  
  bodyElement.style.marginTop = headerElement.getBoundingClientRect().height + 'px';
})

.header{
  position: fixed;
  top: 0;
}
.header, .body, .footer {
    width:100%;
    height:200px;
    border:1px solid blue;
}

.header {height: 50px;}
.body {text-align:center;}
.footer {}

.center-horiz{width:200px;height:100px;border:1px solid #666;  display: inline-block;}

注意：如果在窗口上更改的标题和动态高度调整大小，则必须添加<div class="header">My menu</div> <div class="body">some text2 <br> <div class="center-horiz">div centered horizontally</div> </div> <div class="footer">some text3</div>侦听器，以便在调整大小时设置边距。

Answer 2

您可以使用弹性布局执行此操作，然后.header可以是任何高度，页面的其余部分将自动适应。

将body设置为flex父级，并将.body和.footer包装在新元素中，并将该元素设置为flex-grow: 1和overflow: scroll，以便它将填充窗口的其余部分，该元素将以溢出滚动，.header将保持不变（模仿position: fixed）。

＆＃13;

＆＃13;

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}
.header {
  background: black;
  color: white;
}
.body {
  min-height: 200vh; /* you can remove. just for demo purposes */
  flex-grow: 1;
}
main {
  overflow-y: scroll;
}

＆＃13;

<div class="header">My menu</div>
<main>
  <div class="body">body</div>
  <div class="footer">footer</div>
</main>

＆＃13;

＆＃13;

＆＃13;