Fixed header bar with a slide down panel

Question

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. I'm currently using Jeremie Tisseau's sliding panel code from here: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/

Here is what I've been working on: http://localsq.tumblr.com/test. When you click on "What, When, Where", the panel slides down but when you scroll down the page, the panel doesn't stay fixed...

Does anyone know how to fix this issue? Thanks!

Answer 1

The element with the id of toppanel is set to position : absolute and should be changed to position : fixed so it moves with the "What, When, Where" text. I made that change to your code in FireBug and the panel stayed fixed at the top of the page as you scroll down.

This code:

#toppanel {
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    text-align: center;
    top: 25px;
    width: 100%;
    z-index: 999;
}

Should change to:

#toppanel {
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    text-align: center;
    top: 25px;
    width: 100%;
    z-index: 999;
}