Мой ‹div› под ‹header› становится НЕВИДИМЫМ, когда пользователь прокручивает вниз вместе с ‹header› (невидимым должен быть только заголовок). Почему?

JsFiddle здесь.

Я использую 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 и строка описания вообще не отображаются. Но я добавляю скриншоты того, как это выглядит на локальном хосте.

Когда пользователь НЕ прокручивал:

КОГДА ПОЛЬЗОВАТЕЛЬ ПРОКРУТИЛ СТРАНИЦУ ВНИЗ: