I am encountering difficulties while trying to implement a fixed header with a slide-down panel that also remains fixed as you scroll down the page. Currently, when the slide-down panel is open, the page content scrolls under the header. However, I want the slide-down content/form to stay fixed in its position when active so that only the page content scrolls.
// CSS for the slide-down panel
#sliding_panel {
background: #6C9D30;
height: 0;
position: relative;
overflow: hidden;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
color: #fff;
}
// CSS for the fixed header
header#header {
position:fixed;
width: 100%;
height: 100px;
background: rgba(0,0,0,0.5);
z-index: 1;
}