一起变得不可见（只有标题应该变得不可见）。为什么？<div> <header><header>

Question

JsFiddle在这里。

我正在使用Material Design Lite

。现在在标题中，我需要一个

Title 行，一行显示描述（在下面的屏幕截图中标记为 Story

，然后标记为 

Story story story...

），然后是选项卡栏。 

现在我还想要 Material Design Lite 的 

waterfall 标题效果

，其中当用户向下滚动时，除了

Title 行之外的所有标题行都将变得不可见。但我希望以一种方式使选项卡行（选项卡栏，显示选项卡标题/标题的选项卡栏）保持可见，就像用户向下滚动时的 Title

 行一样。

我尝试过的：

我认为从 <header>

中删除选项卡栏并将其放置在标题正下方（并为其提供与标题相同的

background-color

 等）将使选项卡栏向用户显示为标题的一部分，但由于它实际上不会成为标题的一部分，因此它不会获得

waterfall

效果，即当用户向下滚动页面时它不会消失。

但令我惊讶的是，即使我不将

section.tabs-bar

放入<header>

内，它仍然会产生瀑布效果，即当用户向下滚动页面时它仍然不可见。

所以问题是我该怎么办？如何使

section.tabs-bar

当用户向下滚动页面时不消失。

非常重要的注意事项：

在 JSFiddle 中，输出面板很小，并且由于 Material Design Lite 是响应式的，因此 Title

的标题行和描述的标题行根本不显示。但我添加了本地主机上的屏幕截图。

当用户未滚动时：

当用户向下滚动页面时：

简短回答：将

Answer 1

移出

main

JSfiddle 更新

：添加此CSS：

.mdl-layout__content {
  overflow: hidden;
}

.mdl-tabs.is-upgraded .mdl-tabs__panel {
  overflow-y:scroll;
  height: calc(100vh - 50px);
}

JSfiddle