While searching for methods to resize the header of my website upon scrolling, I came across an example that worked well. You can view the working example on JsFiddle
index
<!DOCTYPE html>
<html lang="en">
<head>
...
</body>
</html>
css
.header {
width:100%;
height:150px;
overflow:hidden;
position:fixed;
top:0;
left:0;
z-index:999;
background-color:#0683c9;
...
.sub-header {
background-color:#000;
height:40px;
color:#999;
width:100%;
}
.clearfix:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0;
}
and the js
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
...
})( window );
The Challenge.
I have implemented a fixed header with two parts (main header and sub-header) as shown in the image here: [link to image]. However, whenever I scroll down, the main header shrinks but the sub-header (black in color) remains visible. I would like the sub-header to disappear when scrolling happens along with the shrinking of the main header. Despite several attempts, I haven't been able to achieve this. Can anyone provide suggestions on how this can be accomplished?