Check out this JsFiddle link for reference.
I have implemented the Material Design Lite framework in my project. In the header section, I want to include a Title row, a row that displays a description (labeled as Story followed by some text), and a row for tabs navigation.
One specific requirement is to achieve the waterfall header effect provided by Material Design Lite, where all header rows except the Title row should disappear when the user scrolls down. However, I need the tab bar to remain visible along with the title row as the user scrolls.
Approach Taken:
Initially, I attempted to move the tabs bar outside the <header> element but style it similarly to appear as part of the header. However, this approach did not trigger the desired waterfall effect on the tabs bar when scrolling.
Interestingly, even when placing the section.tabs-bar outside the <header> element, it still inherited the waterfall effect and disappeared when the user scrolled down.
Hence, the question arises: how can I prevent the section.tabs-bar from disappearing as the user scrolls down?
IMPORTANT NOTE:
Due to the limited display area in JSFiddle's output panel and the responsive nature of Material Design Lite, the header row including the Title and Description might not be visible. Below are screenshots depicting the layout on localhost.
Initial State (User has NOT scrolled):
https://i.sstatic.net/jm9x2.png
Scrolled State (User HAS SCROLLED DOWN):