jquery 当< div>< header>用户向下滚动时,我的下面是不可见的,沿着< header>(只有标题应该是不可见的),为什么?

vsaztqbk  于 2023-11-17  发布在  jQuery
关注(0)|答案(1)|浏览(96)

JsFiddle here.

我使用的是Material Design Lite。现在在标题中,我需要一个Title行,一个显示描述的行(在下面的屏幕截图中标记为Story,然后标记为Story story story...),然后是一个标签栏的行。
现在我还想要Material Design Lite的瀑布标题效果,在这种情况下,除了Title行之外的所有标题行在用户向下滚动时都不可见。但我希望它的方式是标签行(标签栏,显示标签的标题/标题的一个)保持可见,就像用户向下滚动时的Title行一样。

  • 我尝试的:*

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

**但令我惊讶的是,即使我没有将section.tabs-bar放在<header>中,它仍然会产生瀑布效应,即当用户向下滚动页面时,它仍然会隐形。
所以问题是我应该怎么做?如何使section.tabs-bar在用户向下滚动页面时不会隐形。
非常重要的注意事项:

在JSFiddle中,输出面板很小,并且由于Material Design Lite是响应式的,所以Title的标题行和描述的标题行根本不显示。但是我添加了它在localhost上的屏幕截图。

  • 当用户没有滚动时:*

x1c 0d1x的数据

  • 当用户向下滚动页面时:*


的数据

wgx48brx

wgx48brx1#

简单回答:将.task-bar移出mainJSfiddle

更新:添加此CSS:

.mdl-layout__content {
  overflow: hidden;
}

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

字符串
JSfiddle

相关问题