CODEWITHSUNDEEP
javascriptjquerycss
user2669881
user2669881

Reputation: 1

fixed header with a slide down panel that stays fixed as well when you scroll down the page

I'm having some trouble implementing a fixed header with a slide down panel that stays fixed as well when you scroll down the page. When the slide down panel is open the page scrolls under the header but i want the slide down content/form to remain fixed in its position when active so that only the page content scrolls. 

//slide down panel css    
#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;
}

//fixed header css
header#header {
position:fixed;
width: 100%;
height: 100px;
background: rgba(0,0,0,0.5);
z-index: 1;
}

Upvotes: 0

Views: 547

Answers (1)

kasperoo
kasperoo

Reputation: 1584

noticed that you have semi-transparent header, so you can see text scrolling underneath it. Not sure if intended! I've put together a very simple example of a fixed header with fixed sliding panel, hope that's what you're looking for.

var context = $('#header');

context.find('.togglePanel').on('click', function (e) {
    e.preventDefault();
    context.find('#sliding_panel').show();
    context.find('.togglePanel').hide();
});

context.find('.togglePanelClose').on('click', function (e) {
   e.preventDefault();
   context.find('#sliding_panel').hide();
   context.find('.togglePanel').show();
});

        
   
body {
  height: 100%;
  margin:0;
}
#sliding_panel {
  background: #6C9D30;
  height: 50px;
  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;
  margin-top:80px;
  display: none;
}

header#header {
  position:fixed;
  width: 100%;
  height: 100px;
  background: #ccc;
  z-index: 999;
  top:0;
}
a.togglePanel {
  text-decoration: none;
  text-align:center;
  margin: 20px auto;
}
.content {
  padding-top:100px;
  line-height:90px;
  z-index: 888;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>
    <header id="header">
        <a href="#" class="togglePanel">Open panel</a>
        <div id="sliding_panel">hello there!
             <a href="#" class="togglePanelClose">Close panel</a>
        </div>
    </header>
    <div class="content">
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
    </div>
</body>
</html>

Cheers

Upvotes: 1

Related Questions