Take the 2-minute tour ×

I have a menu div that I want to slide down so it's always visible, but I want it to be positioned under my title div. I don't want it to move until the top of the menu hits the top of the screen and then stay in place. Basically I want a sliding menu with a maximum height it can slide to.

share|improve this question
Nice concept. The user doesn't have to scroll back up to locate the menu. Is this menu div horizontal, or is it a vertical one on the left? –  DOK Oct 22 '08 at 14:02
add comment

3 Answers

up vote 8 down vote accepted

I think I understand what you're talking about—we used a similar technique on The King with jQuery. Here's how:


var name                = "#rightsidebar";
var menu_top_limit      = 241;
var menu_top_margin     = 20;
var menu_shift_duration = 500;
var menuYloc = null;

    // Calculate the top offset, adding a limit
    offset = menuYloc + $(document).scrollTop() + menu_top_margin;

    // Limit the offset to 241 pixels...
    // This keeps the menu out of our header area:
    if(offset < menu_top_limit)
        offset = menu_top_limit;

    // Give it the PX for pixels:
    offset += "px";

    // Animate:

(Hat tip to @soyrex who wrote this code.)

share|improve this answer
Yup, that's what I was wanting and infact, I like that way better. –  user30377 Oct 22 '08 at 19:15
What's the role of menuYloc in this code? It doesn't seem to get set anywhere... –  Martin McNulty Aug 29 '11 at 9:29
add comment


I found what I was looking for. Thanks.

share|improve this answer
add comment

Slashdot does this. Check it out at, for example, http://tech.slashdot.org/tech/08/10/22/1246200.shtml

You may be able to lift the technique from their site.

share|improve this answer
add comment

Your Answer


