Question

我正在使用Material Design Lite。现在在标题中，我需要一个Title行，一行显示描述（在下面的屏幕截图中标记为Story然后是Story story story...），然后是一行，即标签栏。

现在我还想要Material Design Lite waterfall header effect，其中除了Title行之外的所有标题行在用户向下滚动时都不可见。但是我想要的方式是标签行（标签栏，显示标签＆＃39;标题/标题的标签栏）仍然可见，就像用户向下滚动时的Title行一样。

我尝试了什么：

我认为从<header>移除标签栏并将其放在标题正下方（并为标题提供相同的background-color等）将使标签栏显示给用户作为标题的一部分，但由于它实际上不是标题的一部分，因此它不会获得waterfall效果，即当用户向下滚动页面时它不会不可见。

但令我惊讶的是，即使我没有将section.tabs-bar放在<header>内，它仍会获得瀑布效果，即当用户向下滚动页面时它仍然不可见。

所以问题是我该怎么办？当用户向下滚动页面时，如何使section.tabs-bar不可见。

非常重要的注意事项：

在JSFiddle中，输出面板很小，并且由于Material Design Lite具有响应性，因此Title的标题行和描述的标题行根本不显示。但我在localhost上添加了它的样子截图。

当用户未滚动时：

当用户向下滚动页面时：

Answer 1

好的，我想我知道你在追求什么。

简短回答：将.task-bar移出main JSfiddle

希望它有所帮助！

注意：我之前指向的链接是：https://stackoverflow.com/help/mcve

MCVC只是帮助那些想要帮助你的人。

更新：添加此CSS：

.mdl-layout__content {
  overflow: hidden;
}

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

注意：将来请注意，您要求让其他人帮助您。我们没有义务这样做。