My <div> below <header> is going INVISIBLE when the user scrolls down, along with <header> (only header should go invisible). Why?

Question

JsFiddle here.

I am using Material Design Lite. Now in the header, I need a Title row, a row which shows description (labelled Story and then Story story story... in the following screenshot), and then a row which is the tabs bar.

Now I also want the Material Design Lite's waterfall header effect, in which all header rows except the Title row go invisible as the user scrolls down. But I want it in a way that the tabs row (tabs bar, the one which show tabs' headers/titles) remains visible, just like the Title row as the user scrolls down.

What I tried:

I thought that removing the tabs bar from the <header> and placing it right below the header (and giving it the same background-color etc. as the header ) will make the tab bar appear to the user as a part of the header, but since it will actually Not be a part of the header, so it will not get the waterfall effect, i.e. it will not go invisible when the user scrolls down the page.

But to my surprise, even when I do not put the section.tabs-bar inside the <header>, it still gets the waterfall effect, i.e. it still goes invisible when the user scrolls down the page.

So the question is that what should I do? How to make the section.tabs-bar NOT go invisible when the user scrolls down the page.

VERY IMPORTANT NOTE:

In JSFiddle, the output panel is small, and since Material Design Lite is responsive, so the header row of Title and that of description is not displayed at all. But I am adding screenshots of what it looks like on localhost.

When the user has NOT scrolled:

WHEN THE USER HAS SCROLLED DOWN THE PAGE:

Answer 1

Short answer: move the .task-bar out of the main JSfiddle

Update: Add this CSS:

.mdl-layout__content {
  overflow: hidden;
}

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

JSfiddle